Display Block:
A block-level element takes up the full width of its parent container and creates a new line after it. Examples of block-level elements include headings, paragraphs, and div. These elements can have a width and height set, and they can have padding and margins applied to them.
<!DOCTYPE html>
<html>
<head>
<style>
.block1{
height: 50px;
width: 200px;
display: block;
background-color: #006100;
}
.block2{
height: 50px;
width: 200px;
display: block;
background-color: cyan;
}
</style>
</head>
<body>
<h2>Display Bolck Property</h2>
<div class="blocks">
<div class="block1">Block 1</div>
<div class="block2">Block 2</div>
</div>
</body>
</html>
Display Inline:
An inline element takes up only as much width as necessary and does not create a new line after it. Examples of inline elements include text, images, and links. These elements cannot have a width or height set, and they can only have padding and margins applied to them horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
.block1{
height: 50px;
width: 200px;
display: inline;
background-color: #006100;
}
.block2{
height: 50px;
width: 200px;
display: inline;
background-color: cyan;
}
</style>
</head>
<body>
<h2>Display inline Property</h2>
<div class="blocks">
<div class="block1">Block 1</div>
<div class="block2">Block 2</div>
</div>
</body>
</html>
Display Inline Block:
An inline-block element takes up only as much width as necessary and does not create a new line after it. Examples of inline-block elements include images with captions, form elements, and buttons. These elements can have a width and height set, and they can have padding and margins applied to them.
<!DOCTYPE html>
<html>
<head>
<style>
.block1{ height: 50px; width: 200px; display: inline-block; background-color: #006100; }
.block2{ height: 50px; width: 200px; display: inline-block; background-color: cyan; }
</style>
</head>
<body>
<h2>Display Inline-Block Property</h2>
<div class="blocks">
<div class="block1">Block 1</div>
<div class="block2">Block 2</div>
</div>
</body>
</html>
