The inline-block value for the display property in CSS is used to combine the characteristics of both inline and block elements. Elements with display: inline-block behave like inline elements in terms of layout, but they also respect width and height properties like block elements.
Key Characteristics:
1. Inline Characteristics:
Elements are laid out horizontally, one after the other.
Elements do not start on a new line and do not force subsequent content to start on a new line.
2. Block Characteristics:
Elements respect the width and height properties.
Margins and paddings are applied around the element.
Syntax:
selector {
display: inline-block;
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.inline-block-element {
display: inline-block;
width: 150px;
height: 100px;
margin: 10px;
background-color: lightblue;
text-align: center;
vertical-align: top;
line-height: 100px; /* Centers text vertically */
}
</style>
</head>
<body>
<div class="inline-block-element">Element 1</div>
<div class="inline-block-element">Element 2</div>
<div class="inline-block-element">Element 3</div>
</body>
</html>
Element 1
Element 2
Element 3