CSS display: inline-block
Особенности строчных и блочных элементов объединяются в объявлении display: inline-block.
Такой элемент располагается на одной строке с соседними строчными или строчно-блочными элементами, но принимает width, height, margin-top и margin-bottom, как блочный элемент.
Пример
Здесь display: block сравнивается с display: inline и display: inline-block.
Prompt
Покажите разницу между display: inline, display: inline-block и display: block, используя три элемента span. Инлайн-span имеет отступ и красную рамку. Inline-block-span имеет ширину 100px, высоту 35px, отступ 5px и красную рамку. Block-span имеет те же размеры и рамку, что и inline-block.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline vs Inline-Block vs Block</title>
<style>
span.a {
display: inline;
padding: 5px;
border: 2px solid red;
}
span.b {
display: inline-block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
span.c {
display: block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
</body>
</html>
Создание горизонтального меню навигации
Элементы списка обычно располагаются друг под другом, и display: inline-block часто используют, чтобы расположить их горизонтально.
Пример
Если применить display: inline-block к элементам списка, они превратятся в горизонтальное меню навигации.
Prompt
Создайте горизонтальное меню навигации, используя неупорядоченный список с display: inline-block для элементов списка. Меню имеет светло-серый фон, без list-style, без padding/margin на ul, а каждый li имеет размер шрифта 18px и отступ 15px.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Menu</title>
<style>
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>