День 22: Блочные и строчные элементы в CSS.

Блочные Элементы: Основные Свойства

Блочные элементы — это такие элементы, которые занимают всю ширину своего родительского элемента и всегда начинаются с новой строки. Примерами таких элементов являются div, h1, p, ul, ol и многие другие.

Что можно делать с блочными элементами?

1. Ширина и Высота (width и height): Можем задать фиксированную ширину и высоту элемента. Это полезно, когда нужно создать элементы определенного размера или поддерживать их пропорции.
2. Отступы (margin): Это пространство вокруг элемента, чтобы создать расстояние между элементами или выровнять их на странице.
3. Внутренние Отступы (padding): Это пространство внутри элемента, между его содержимым и границей, помогает создать расстояние между текстом и краями элемента.
4. Границы (border): Это рамки вокруг элемента. Можем выбрать их ширину, стиль и цвет. Границы могут быть использованы для визуального выделения элементов или добавления дизайнерских элементов.

Строчные Элементы: Основные Свойства

Строчные элементы занимают столько места, сколько необходимо для их содержимого, и не начинаются с новой строки. Примерами таких элементов являются span, a, strong, em и многие другие.

Что можно делать со строчными элементами?

1. Размер Шрифта (font-size): Можем задать размер текста, чтобы он был читаемым и соответствовал дизайну.
2. Цвет Текста (color): Позволяет изменить цвет текста, что может быть полезно для выделения важной информации или соответствия цветовой схеме сайта.
3. Украшения Текста (text-decoration): Можем добавлять подчеркивания, зачеркивания или другие украшения к тексту. Это часто используется для выделения ссылок или акцентов.
4. Цвет Фона (background-color): Можем задать цвет фона элемента, что может быть полезно для создания визуальных акцентов или выделения определенных частей текста.