Назад к вопросам
Junior
86
questionbank
В чем разница между inline-блоком и inline-элементом?
Sobes Copilot
Получайте ответы в реальном времени
Ответ от нейросети
sobes.tech AI
Inline-элемент занимает только необходимую ширину, не создает новую строку и не позволяет задавать width, height, margin-top, margin-bottom.
Inline-блок элемент ведет себя как inline-элемент в плане расположения в потоке (не создает новую строку, идет в линейку), но как block-элемент в плане размера и внешних отступов (можно задавать width, height, margin-top, margin-bottom).
| Свойство | Inline-элемент | Inline-блок элемент |
|---|---|---|
| Занимаемая ширина | По содержимому | По содержимому или заданная |
| Новая строка | Нет | Нет |
width |
Игнорируется | Применяется |
height |
Игнорируется | Применяется |
margin-top |
Игнорируется | Применяется |
margin-bottom |
Игнорируется | Применяется |
padding-top |
Применяется (не влияет на соседние элементы) | Применяется |
padding-bottom |
Применяется (не влияет на соседние элементы) | Применяется |
<!-- inline-элемент (например, <span>) -->
<span>Это inline</span> <span>Тоже inline</span>
<!-- inline-block элемент -->
<div style="display: inline-block; width: 100px; height: 50px; margin: 10px; background-color: lightblue;">Inline-block</div>
<div style="display: inline-block; width: 100px; height: 50px; margin: 10px; background-color: lightgreen;">Тоже inline-block</div>