In CSS, inline-block is a display property value that combines the characteristics of both inline and block elements. It allows an element to be displayed as an inline-level block container, which means that it will appear inline with other elements but can also have a specific width, height, padding, and margin just like a block-level element.
When an element is set to inline-block, it can contain text and other inline-level elements just like an inline element. However, it also has the ability to have dimensions and spacing properties applied to it, like a block element. This makes inline-block elements useful for creating more complex layouts where you need a mixture of both inline and block level elements.
Some common use cases for inline-block include creating inline navigation menus, creating side-by-side elements, or creating a row of elements that wrap to the next line when there isn't enough space.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
This is a basic HTML document that contains four div elements with class name content. They each contain a paragraph of text.
.content {
display: inline-block;
width: 200px;
height: 200px;
background: yellow;
margin: 5px;
padding: 5px;
}
This CSS code defines a class named "content". The properties for this class are:
display: inline-block;makes the element behave like an inline element, but with the ability to set a width and height.width: 200px;sets the width of the element to 200 pixels.height: 200px;sets the height of the element to 200 pixels.background: yellow;sets the background color of the element to yellow.margin: 5px;sets the margin around the element to 5 pixels.padding: 5px;sets the padding inside the element to 5 pixels.
This code creates a block element with a fixed size of 200x200 pixels, with a yellow background and some spacing around it. The display: inline-block; property allows multiple elements with this class to be displayed side-by-side horizontally, as opposed to stacking vertically like normal block elements.
No comments:
Post a Comment