xxxxxxxxxx
.d_in {
display: inline;
/* This causes a block-level element to act like an inline element. */
}
.d_b {
display: block;
/* This causes an inline element to act like a block-level element. */
}
.d_in_b {
display: inline-block;
/* This causes a block-level element to flow like an inline element
Compared to display: inline, the major difference is that
display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings
are respected, but with display: inline they are not.
*/
}
.d_n {
display: none;
/* This hides an element from the page. */
}
display:inline
xxxxxxxxxx
.inline-element {
display: inline;
width: 1000px; /* ❌ won't have any effect */
height: 1000px; /* ❌ won't have any effect */
}
xxxxxxxxxx
/*Compared to display: inline, the major difference is that
display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.
Compared to display: block, the major difference is that
display: inline-block does not add a line-break after the element,
so the element can sit next to other elements.
The following example shows the different behavior of
display: inline, display: inline-block and display: block: */
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
xxxxxxxxxx
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
xxxxxxxxxx
// As you may know there is always an annoying whitespace between
// inline-block elements, and if you want to use instead of flex just for fun
// that is the way to solve it:
// Add HTML:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
// Add CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
font-size: 0; // That is how it is done. It eliminates those whitespaces
}
.box {
display: inline-block;
background-color: lime;
margin: 0;
font-size: 1rem; // Add this because we have applied that font size property to 0
width: calc(100% / 4);
height: 200px;
border: 1px solid green;
}
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Properties Example</title>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<span class="a">Inline</span>
<span class="b">Inline-Block</span>
<span class="c">Block</span>
</body>
</html>
xxxxxxxxxx
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block. Its inline but we can add width height etc