inline block
1.display:inline-block
display:inline-block the top and bottom margins/paddings are respected, but wit display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line 14 <mead> break after the element, so the element can sit next to other elements.
Display inline - block
Example
<!DOCTYPE html>
<html>
<head>
<style>
nav {
background-color: lightblue;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 30px;
padding: 30px;
Margin:20px;
}
</style>
</head>
<body>
<h1>display: inline-block</h1>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">Projects</a></li>
<li><a href="#clients">Clients</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
display:inline-block
output
2.Demonstration
(inherit property value)
Demonstration
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { display: inline; }
p{ display: inherit;}
</style> </head>
<body>
<p>These two paragraphs generates inline boxes, and it results in</p> <p>no distance between the two elements.</p>
</body>
</html>
Demonstration
output
3.Flex-direction property
The flex-direction property specifies the direction of the flexible items. If the element is not a flexible item, the flex-direction property.
Flex-direction property
Example
Flex-direction property
output
