Inline Block: важный элемент CSS для удобной верстки
Inline block - это тип дисплея CSS, который объединяет элементы в одну строку, но позволяет им использовать свойства блочного элемента, такие как наличие отступов, изменение высоты и ширины и т.д.
Пример кода:
HTML:
Я инлайновый блок
Я тоже инлайновый блок
CSS:
.container {
width: 400px;
}
.my-inline-block {
display: inline-block;
width: 150px;
height: 150px;
background-color: #ccc;
margin-right: 10px;
}
В данном примере мы создали контейнер и два дива, которые имеют класс `.my-inline-block`. Мы задали им свойство `display: inline-block`, чтобы элементы располагались в одну строку, и свойство `width`, чтобы задать им фиксированную ширину. Мы также добавили другие свойства, такие как `height`, `background-color` и `margin-right`, чтобы они выглядели более наглядно.
В итоге мы получили два блока, которые располагаются в одну строку и имеют блочные свойства. Это позволяет использовать инлайновые блоки для создания более сложных макетов и расположения элементов на сайте.