Block? Inline?? Inline- Block???
Display property is one of the most fundamental properties in CSS. It can take a host of other values like: none, flex, table, table-row and so on. However as a beginner most of the HTML elements I used were either block,inline or inline-block and understanding the basic differences between these helped me greatly

Display: block
<div> ,<p>, <section>, all your <h1> to <h6> tags, are all examples of block level elements. Block elements will occupy the complete width of its immediate parent.
Things to note
- By default the width of the element would be hundred percent of the parent
- In case you do specify a width say 50%, the remaining space cannot be occupied by another sibling element
Code snippet 1
HTML:<div class="basic">
Lorem ipsum dolor sit amet
</div><div class="basic half-width">
Lorem ipsum dolor sit amet
</div>
<div class="basic half-width">
Lorem ipsum dolor sit amet
</div>CSS:.basic{
margin-bottom:10px;
background-color: #aec6cf;
}.half-width{
width:50%;
}

Display: inline
<span>,<a> and <label> are common examples of inline elements. They take exactly the space required by the content inside them.
Things to note
- You cannot specify a width or height to these elements. It will simply not get reflected as long as the display property is inline
- You also cannot specify vertical margin. However you can specify horizontal margin eg. margin-left or margin-right
Code snippet 2
HTML:<span class="word-elt">Lorem</span>
<span class="word-elt">ipsum</span>
<span class="word-elt">dolor</span>
<span class="word-elt">commodo</span>
<br><br><span class="sentence-elt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</span><span class="sentence-elt-2">
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</span>CSS:.word-elt {
background-color: #77dd77;
width: 25%; //has no effect
}.sentence-elt {
background-color: #aec6cf;
margin-right: 40px;
margin-bottom: 10px; //has no effect
}.sentence-elt-2 {
background-color: #77dd77;
}

Notice the white spacing between the words. Its not specified by any styling. It is the inline spacing applied between inline elements by browser.
Display: inline-block
<button>, <img>, <input> and <textarea> are great examples of this. They take up only space required by the content but accept height and width specifications.
Things to note
- Consider the example we looked at for inline. If i were to make it inline-block it would look something like in (figure 3). Aha!! you see while it applies width property and allows sibling elements to occupy the space next to it, it maintains a rectangular form when compared to inline elements.
Code snippet 3
HTML:<span class="word-elt inline-block-class">Lorem</span>
<span class="word-elt inline-block-class">ipsum</span>
<span class="word-elt inline-block-class">dolor</span>
<span class="word-elt inline-block-class">commodo</span><br><br><span class="sentence-elt inline-block-class">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</span><span class="sentence-elt-2 inline-block-class">
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</span>CSS:.inline-block-class{
display: inline-block;
}.word-elt {
background-color: #77dd77;
width: 25%;
margin-bottom: 10px; // margin is applied
}.sentence-elt {
background-color: #aec6cf;
margin-bottom: 10px; // margin is applied
}.sentence-elt-2 {
background-color: #77dd77;
}

Notice that though the 4 elements with class word-elt have width 25%, they don’t fit in the same line because of inline spacing.
Handy tips
- It’s generally advisable to have siblings with the same display property. That is to say don’t put a <span> in along with <div> elements or throw in an <h1> tag with a couple <label> tags. It’s not a hard and fast rule. But it would bring a certain sanity to your HTML and CSS.
- Preferably don’t change the display property of an element from inline all the way to block or the other way. If you are about to do this, think of other possibilities first; like using another tag with the required display property or perhaps wrapping it in a parent element with the display property you want.
- When you want block level elements to be displayed in the same line consider using float instead of changing display to inline-block. Inline-block behaves unpredictably at times with regard to inline spacing on the left/right and vertical alignment. And as a beginner you wouldn’t know if you got the code wrong or inline-block is acting up.
With BasiCSS series I try to cover certain core concepts of CSS as well as doubts beginners often have about them. If you liked this article do give it an applause. I would also love to hear your thoughts/feedback.
