CSS Concepts
Topic: What does it mean to display inline vs inline blocks?
Everything has a default way of operating. Even you and I!
I brush my teeth a certain way, starting from my back left and then moving around the front then to my right. All this without thinking.
When I drink fizzy I always hiccup once right away on my first sip.
Some of these default things we do can be changed with some effort and specificity.
If my dentist told me I needed to pay particular attention to my right back teeth, and that I should begin brushing from right to left, that would certainly be possible with a little conscious effort and instruction from my brain. The specificity creates the difference between 'I need to change the way I brush my teeth from the way I'm currently doing it', to 'I need to start brushing from the right and work my way to the left.'
(My hiccup thing however, can't be changed in the same way. But it doesn't really affect my life too much and also isn't that relevant to what I'm explaining.)
You can see I'm heading towards the meaningful part of this explanation... so let's go there:
- A page is made up of elements, like headings, text, images etc. And these have a default (initial) way of laying out on the page. For example, they follow the order that I list elements, top to bottom and left to right (as opposed to bottom to top, that would be rather confusing, but still possible!)
- We can manipulate the layout of these elements using CSS by assigning a specific instruction or code.
- But first we'd need to understand what the default way is, so that we can be specific and conscious about what change we are implementing. This is when we get to 'Normal Flow'
Normal Flo'
Inline
- Inline elements mean they follow the content that is given. This means that meaning width and height properties can’t be set. It can start alongside the previous element as long as there is space inside the width and then it can ‘overflow’ to the next line.
- A good way to remember how this works is to think of the element as 'falling in line'. It follows the lines of the content.
Block
- A block element takes up the whole horizontal space of what it’s contained by. The vertical space is determined by its content. Therefore it makes a block shape! A new block element starts below the previous one, and on a new line. Width and height properties can be changed for the block.
Not normal flo'
- You can use the
display:property to change the behaviour of the outer display (outside box) as well as the inner contents. - Inline-block operates the same as inline in terms of layout, however you are able to set the width and height.
- Inline-block also respects the boundaries of top and bottom margins/paddings which inline does not
display:block
display:inline
display:inline-block
See the below example of buttons using display: inline vs display:inline-block
