I’m trying to build up to coding a navigation bar, but the first step is getting some better understanding of {display: block;} and {display: inline-block;}. I can’t lie, at first I was like “what-the-what-now?” – but hopefully after this post these concepts will be a lot clearer to me and you if you’re just learning like me.
‘Display: block;’ to me is the easiest to understand so let’s start there. Suppose you want to code a hyperlink inside a box with a width of 250px, a height of 30px, a blue solid border and a font color of green. Your probably thinking this is way too easy, just code the following:
CSS:
.link {width: 250px; height: 30px; border: 1px solid blue; color: green; text-decoration: none;}
HTML:
<a href=”#” class=”link”>Jason Learns Code</a>
When you view this you’ll see you get your blue box, but not the designated height or width. That is because the <a> selector is not a “block” element like say a p or a div. A block element is an element that naturally takes up the entire width of available space. For example if I code the following:
HTML:
<div style=”border: 3px solid purple;”>Jason Learns Code.</div>
It is a div so it will naturally expand to 100% of the available width, you only add a ‘width:’ declaration to a div if you wish to shorten the div to a specified width. The <a> element is the opposite, it naturally only takes up the width and height of the text (or the image) within it. Thus in the above example the width is only as long as the text “Jason Learns Code” – it did not accept the declaration that the width should be 250px or the height of 30px.
You can reverse this by adding “display: block” to your CSS, that will make the <a> take on the ‘block’ attributes of length and width.
CSS:
.link {display: block; width: 250px; height: 30px; border: 1px solid blue; color: green; text-decoration: none;}
Now the text ‘Jason Learns Code’ will be inside of a blue border box width a width of 250px and a height of 30px.
‘Display: inline-block;’ is very similar to the float property. Using the same example from above, suppose you wanted 3 blue boxes side by side in horizontal row with 10px of space in between them – that is a job for inline-block.
CSS:
.link {display: inline-block; margin-left: 10px; width: 250px; height: 30px; border: 1px solid blue; color: green; text-decoration: none;}
HTML:
<a href=”#” class=”link”>Jason Learns Code</a>
<a href=”#” class=”link”>Jason Learns Code</a>
<a href=”#” class=”link”>Jason Learns Code</a>
With this all the blue boxes will be on one row, they are all in a line, or “inline.” This is very similar to the float property where instead of ‘display: inline-block’ you would code ‘float: left’.
Note, if you wanted all three of the blue boxes to be a vertical column, you could use ‘display: block.’
What about just ‘display: inline’? Let’s keep using the above example and suppose your CSS was:
CSS:
.link {display: inline; margin-left: 10px; width: 250px; height: 30px; border: 1px solid blue; color: green; text-decoration: none;}
What you’ve done here is strip out the ‘block’ – so just like in the first example your width and height properties will be disregarded. The elements on the page will only be as long and tall as the text “Jason Learns Code.” It will still put all the elements in a line (inline) in one horizontal row.