Перейти к основному содержимому

[Easy] Element Properties (Свойства элементов)

1. Что такое block и inline элементы?

Block элементы

Block элементы обычно начинаются с новой строки и расширяются на всю доступную ширину.

Распространённые примеры:

div, section, article, header, footer, main, nav, ul, ol, li, form.

Inline элементы

Inline элементы располагаются внутри текста и по умолчанию не начинают новую строку.

Распространённые примеры:

span, a, strong, em, img, label, code.

2. Что такое inline-block?

inline-block располагается в строке, но сохраняет блочное поведение при определении размеров.

.tag {
display: inline-block;
padding: 4px 8px;
margin-right: 8px;
}

Используйте его, когда элементы должны выстраиваться горизонтально, сохраняя при этом контроль над width/height/padding.

3. Что делает * { box-sizing: border-box; }?

Это изменяет расчёт размеров так, что объявленные width/height включают padding и border.

* {
box-sizing: border-box;
}

Это делает расчёты макета более предсказуемыми.

4. Быстрые ответы для собеседования

Q1: Могут ли inline элементы задавать width/height?

Обычно нет (кроме замещаемых элементов, таких как img). При необходимости используйте inline-block или block.

Q2: Могут ли block элементы отображаться inline?

Да, путём изменения display через CSS.

Q3: Почему border-box так популярен?

Он устраняет неожиданности с размерами и упрощает адаптивные макеты.

Ссылки