Home / Questions / 24964
Accepted
Hoose
Asked: 2020-09-25 20:45:32 +0800 CST 2020-09-25 20:45:32 +0800 CST

What is the difference between display: block, display: inline and display: inline-block?

  • 772

I have found several doubts about the difference when working with these types of elements in CSS.

So what are the differences between these elements?

html

1 Answers

  1. Best Answer

    Summary

    • inline: Shows all the elements on the same line (respecting the flow) and does not accept the properties width, height or vertical margins.
    • block: Displays the elements in separate lines and accepts the properties width, height and vertical margins.
    • inline-block: Its behavior is a mix between the previous two, all the elements are displayed on the same line (respecting the flow) and it also accepts the properties width, height and vertical margins.

    To put it simply, certain HTML tags are not affected by the flow of other elements, just limited to their natural usage.

    Inline or inline elements

    Inline elements defined by HTML are: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s , samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

    An example of these tags could be <a>, <em>and perhaps the most useful of all <span>, all these elements are called "inline", because by default they carry their display: inline, without the need to specify it in a CSS document.

    Imagine that we have the following scenario:

    .box {
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    As we can see, all the X Boxes have the inline property (despite not being defined in the CSS) and they align with each other but widths, heights, and much less vertical margins are not respected.

    Block or block elements

    On the contrary, there are block elements, which are not mixed with the rest of the elements, being shown in independent "lines".

    The block elements defined by HTML are: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p , pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

    Going back to the same scenario but changing the inline elements to block elements, we will have the following result:

    .box {
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<div class="box">CAJA 1</div>
<h6 class="box">CAJA 2</h6>
<div class="box">CAJA 3</div>
<pre class="box">CAJA 4</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    As I mentioned, now the block elements are displayed in independent "lines" but above all, they already respect widths, heights and vertical margins.

    Inline block or inline-block element

    We have just seen the block elements and the inline elements, now it is time to continue with the inline-block element.

    This element is a mixture of both, being able to align but also respects height, width and vertical margins.

    .box {
    display: inline-block;
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    • 11