Block vs Inline block vs inline Elements
Now this one is the most import topic, if you miss this or did not understand it properly, then you will not be able to write css properly or for writing better css, you need to remember this well. So you got the message.
Block elements
Block elements are those html tags/elements which occupies whole space from left side of webpage to to the right side of webpage horizontally.
Normally, block level elements are like rectangles. More than one block elements if side by side present, by default are stacked vertically (you can change this by applying css obviously). Every block elements always starts on a new line.
Note::
If the images is not clear, kindly make a right click on image and open it in new tab for more clarity.
Look at this above diagram, on a webpage, 2 block level elements sits vertically and takes whole horizontal spaces or width. More than that it has below properties::
- By default it takes full width but we can set its width and height property in css.
- We can set its right, left, top, bottom margins and paddings properties in css.
Note::
If you do not know how to identify an html tag as block element or not then simply put a border property on that html element as border: 1px solid black and observe whether it starts from left side and goes to extreme right covering whole row or width or not. It it does then its block element.
You need to remember these features if you want to master css otherwise you will be stuck.
Inline elements
Inline elements are those html tags/elements which occupies only as much space as is its content.
More than one inline elements normally sit side by side on the same line. (you can change this by applying css obviously). If one block element and one inline elements are present then Block element will start on a new line. And once it finishes then inline element will start on another line as block elements by default takes whole line or horizontal row. And interestingly an inline element can exists inside a block level elements.
Please observe the whole diagram for a lot of combination of cases for understanding better.
Note::
If the images is not clear, kindly make a right click on image and open it in new tab for more clarity.
Please observe that even when there is a space in the same line or row as inline element, block element if present will always start on a new line.
More than that its most important other features are:
- we can never set its width and height property in css. If we change it to block by display:block css property then we can set its width and height. But then again it will no longer be an inline element and will be changed to block with that css property.
- We can always set its right and left margins and paddings properties in css but never its top and bottom margins and paddings.
You need to remember these features if you want to master css otherwise you will be stuck.
Examples:: span, anchor tag, strong tag, em tag, b tag etc.
Inline-block elements
We have the best of both the worlds i.e inline-block element which has properties from inline as well as block elements.
Inline-block elements are those html tags/elements which occupies only as much space as is its content (property coming from inline elements) plus we can set its width and height and all its margins and paddings (property coming from block level elements).
More than one inline-block elements normally sit side by side on the same line. (you can change this by applying css obviously).
Examples:: img tag.
Note::
This topic is so important that you can not learn css without knowing this thing by heart. Most importantly, you need to remember how these 3 elements behave as well as whether width and height can be set in which element and margin and paddings (which side of margin and padding works) can be set or not. I hope you got the message.
Almost all the HTML tags mostly 90% are block level elements, 7-8% inline and 1% is inline-block elements.