Погружение в inline-block [28/32]
C блочно-строчными элементами вы уже знакомились в курсе про блочную модель документа. Напомним, что это элементы, у которых свойство display имеет значение inline-block.
Блочно-строчные элементы ведут себя двояко. Снаружи они выглядят как обычные строчные, но внутри они ведут себя как блочные.
От строчных им достались следующие черты:
по ширине они ужимаются под своё содержимое;
могут располагаться в одну строку;
реагируют на вертикальное выравнивание, vertical-align;
реагируют на горизонтальное выравнивание, text-align, заданное у родителя.
От блочных:
им можно задавать размеры с помощью width и height;
а также внешние и внутренние отступы и рамки, которые работают во всех направлениях и увеличивают размер элемента.
block-28-32.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Погружение в inline-block</title>
<meta charset="utf-8">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<style>
body {
font-family: "PT Sans", sans-serif;
}
.container {
width: 400px;
padding: 10px;
margin: 20px auto;
text-align: center;
box-shadow: 0 0 2px #cccccc;
}
.block {
display: inline-block;
text-align:left;
vertical-align: middle;
width: 70px;
margin: 10px 5px;
padding: 10px;
color: white;
background: #3498db;
border: 2px solid #34495e;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
Блок 1<br> Высота средняя
</div>
<div class="block">
Блок 2<br> Высота больше среднего
</div>
<div class="block">
Блок 2<br> Низкий
</div>
</div>
</body>
</html>
float vs inline-block [29/32]
Блочно-строчные элементы могут выстраиваться друг за другом, а если не хватает места, то они переносятся на следующую строку.
Поведение похоже на флоатные элементы, однако, есть существенное отличие.
При переносе на следующую строку блочно-строчные ведут себя намного логичней. Высота строк у них рассчитывается по максимальному элементу с учётом отступов.
Это упражнение создано, чтобы продемонстрировать отличие в поведении флоатов и инлайн-блоков. В исходном состоянии мы видим несколько флоатных блоков, которые не смогли выстроиться в ряды, так как зацепились друг за друга.
Вы измените тип блоков на блочно-строчные и сами всё увидите, насколько умнее ведут себя инлайн-блоки.
block-29-32.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>float vs inline-block</title>
<meta charset="utf-8">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<style>
body {
font-size: 16px;
font-family: "PT Sans", sans-serif;
}
.container {
width: 400px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 0 2px #cccccc;
}
.container::after {
display: table;
content: "";
clear: both;
}
.block {
display: inline-block;
/*float: left;*/
vertical-align: top;
margin-bottom: 20px;
width: 90px;
margin-right: 10px;
padding: 10px;
color: white;
background: #3498db;
border: 2px solid #34495e;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
Блок 1<br> Товар с очень-очень длинным описанием
</div>
<div class="block">
Блок 2<br> Обычный товар
</div>
<div class="block">
Блок 3<br> Обычный товар
</div>
<div class="block">
Блок 4<br> Еще один товар с длинным описанием
</div>
<div class="block">
Блок 5<br> Обычный товар
</div>
<div class="block">
Блок 6<br> Обычный товар
</div>
<div class="block">
Блок 7<br> Обычный товар
</div>
<div class="block">
Блок 8<br> Обычный товар
</div>
</div>
</body>
</html>