Demystifying CSS Layouts: Block vs. Inline vs. Inline-Block Explained for Beginners
In html every element is a rectangular box. But some of the elements are arranged like in stack order and other elements smoothly flow within paragraphs of text. Why is that happening?
The answer is CSS display property that controls the displaying behaviour of html elements.
block
The block element takes up full space available on screen regardless of the space required or not.
Behaviour:-
The block level element always starts with a new line and forces the element that comes before and after them to separate the line.
Dimensions:-
It takes up 100% width of its parent element by default and also accepts extra margin and padding.
Common Elements:-
<h1>-<h6>, <div>, <hr>, <ol>, <ul>, <li>, <p>, <table>, <form>, <fielset>, <header>, <footer>, <nav>, <aside>, <article>, <main>, <section>
Usage:-
Creating structure of page layout, major sections, paragraphs, and containers.
Example:-
html:-
<header>
<h1>Block level elements</h1>
</header>
<div>
This is div container.
<p>This is block level element.</p>
end of div.
</div>
CSS:-
h1
{
background-color: black;
color:white;
}
div
{
background-color:green;
color:blue;
}
p
{
background-color: red;
}
output
As you can see in the output, the elements are displayed in stack order and acquired full width. Here, i have also specified the block element <p> in the <div> container. The top and bottom space is visible before and after the element.
Example:-
<!-- making inline elements to block using display property-->
<span>Inline</span><span>elements</span><span>converting</span><span>to</span><span>Block</span>
output
CSS:-
span
{
display:block;
background-color:green;
color:yellow;
}
output:-
Using display property you can convert inline elements to block. In this example we have converted inline <span> elements to block elements.
Inline
The inline element takes up only required space. They flow inside any paragraph or any block element.
Behaviour:-
Inline elements do not start with a new line and don’t force other elements to shift new lines. The element with inline display placed side by side horizontally.
Dimensions:-
It takes only required space (width and height) and ignores extra padding and margins of top and bottom.
Common Elements:-
<span>, <a>, <input>, <object>, <select>, <strong>, <img>, <button>, <br>, <script>, <i>, <label>, <dfn>
Usage:-
Styling specific text inside paragraph (e.g. making one specific word bolder inside paragraph using <b>)
Example:-
html:-
<h1>Inline elements</h1>
<p>This is paragraph. <span>Inline</span> element specified in this element.</p>
CSS:-
span
{
background-color:green;
color:yellow;
}
output:-
In the output, h1 (block element) displayed in black background and white color text, that css style defined earlier.
Get Frontend Writing’s stories in your inbox
Join Medium for free to get updates from this writer.
The inline element <span> specified in <p> element with green background color and yellow text. You can see that it requires only needed space and flow in the element <p>.
Example:-
<!-- making block elements to inline using display property-->
<section>The</section>
<section>block</section>
<section>element</section>
<section>converted</section>
<section>to</section>
<section>inline</section>
output:-
CSS:-
section
{
display: inline;
background-color:black;
color: white;
}
output:-
In example, numbers of <section> elements are taken and with display property setting to inline all the section elements behave like inline elements.
Note:-
The inline elements flow in the block elements but block elements can’t be placed inside inline elements in standard HTML, if you do that it will result in unexpected layout and styling bugs and also break the html nesting rule. The block level elements can be placed inside the block element.
Inline-block
It combines both elements (block and inline) characteristics. It displays elements horizontally like inline and without forcing line break. It also respects height, width and all margins and padding.
Behaviour:-
Elements flow in other elements without line break.
Dimensions:-
Respects height, width and all margins and padding.
Common Elements:-
By default none of the elements are inline-block. By using CSS property display: inline-block; you can make any element bahave inline-block.
Usage :-
To create a horizontal navigation bar, image galleries with custom spacing, placing buttons side by side with specific dimensions.
Example:-
<h1>Inline-block</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
<p>This is <b>block</b> element. The element inside it is <b>inline</b> but it's display property set to <b>inline-block</b></p>
CSS:-
ul li
{
background-color: violet;
border:3px solid black;
padding:5px;
}
b
{
background-color:blue;
padding:5px;
}
output:-
Look at the output, by default elements are displayed as they are. Block elements displayed in stack order and inline elements are overlapping on text.
To display block elements <ul> in horizontal line and handle spaces in inline elements there is a solution that is setting their ‘display’ property to ‘inline-block’.
ul li
{
display: inline-block;
background-color: violet;
border:3px solid black;
padding:5px;
}
b
{
display: inline-block;
background-color:blue;
padding:5px;
}
After setting the display property to inline-block the output is different.
output:-
So inline-block solve the glitch arises in both block and inline.
Quick comparison summary
Features : Either in block or inline or inline-block
Start on a new line:- block
Respects height and width:- block and inline-block
Respects vertical margin/padding:- block and inline-block
Flows with surrounding content:- inline and inline-block
