We will learn together 3 styles of displaying elements in CSS that are Block, Inline and Inline-block to see if they are different!
Before entering the article, suppose we have the following HTML code:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> viewport <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> width=device-width, initial-scale=1.0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token comment"><!-- displays site properly based on user's device --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> main.css <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Đoạn văn <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> span</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> inline <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> đầu tiên <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> span</span> <span class="token punctuation">></span></span> trong trang <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Đoạn văn <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> span</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> block <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> thứ 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> span</span> <span class="token punctuation">></span></span> trong trang <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Đoạn văn <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> span</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> inline-block <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> thứ 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> span</span> <span class="token punctuation">></span></span> trong trang <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
We’ll add a bit of CSS for the above classes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token selector">span</span> <span class="token punctuation">{</span> <span class="token property">border</span> <span class="token punctuation">:</span> 2px doted red <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.inline</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.block</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> block <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 100px <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 100px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.inline-block</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 100px <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 100px <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Then on the interface we will see everything displayed like this:
1, Inline
- The element with the display property of type Inline will be on the same line as the elements next to it.
- We can treat the Inline element as words belonging to a paragraph. When there is a blank space, it is next to the previous element.
- The distance between the Inline element and its adjacent elements is set to default as the font-size word spacing
- We cannot define width, height, padding, and vertical margin (top, bottom) properties for Inline elements.
We can try adding the width and height properties to the CSS for the Inline element:
1 2 3 4 5 6 | <span class="token selector">.inline</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline <span class="token punctuation">;</span> <span class="token property">width</span> <span class="token punctuation">:</span> 100px <span class="token punctuation">;</span> <span class="token property">height</span> <span class="token punctuation">:</span> 100px <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
And try to see the results:
Everything remains the same.
2, Block
- The element with the display property of type Block will be on a separate line.
- We can treat the Inline element as a separate paragraph, separate from the parts above and below it
- With elements of type Block, it is completely possible to define the width and height for it (the default value is 100% of the parent element).
If we comment on the width and height attributes in the above example:
1 2 3 4 5 6 | <span class="token selector">.block</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> block <span class="token punctuation">;</span> <span class="token comment">/*width: 100px; height: 100px;*/</span> <span class="token punctuation">}</span> |
Then the results are as follows:
Clearly, width and height have an effect on the Block property.
3, Inline-block
If you want to display your Elements in the Inline style, but want to align the width, height, padding and margin vertically, this is what you need.
Inline-block is a combination of Inline and Block, it can both display on the same line as Inline, and can align the values as stated above like Block.
Just like in the Block, let’s try to comment on the width and height properties in the Inline-block’s CSS snippet:
1 2 3 4 5 6 | <span class="token selector">.block</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token comment">/*width: 100px; height: 100px;*/</span> <span class="token punctuation">}</span> |
This time I will not post the results for you to try to experience it!
Try creating a navigation-bar with Inline-block
Given the features of Inline-block, let’s try creating a navigation-bar along with it. Here I will focus on the properties of Inline-block so I will not do it too well: v
1 2 3 4 5 6 7 8 9 10 11 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> My Inline-block Navigation Bar <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> nav <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #home <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Home <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #about <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> About Us <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #clients <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Our Clients <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #contact <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Contact Us <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token selector">.nav</span> <span class="token punctuation">{</span> <span class="token property">background-color</span> <span class="token punctuation">:</span> yellow <span class="token punctuation">;</span> <span class="token property">list-style-type</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span> <span class="token property">text-align</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.nav li</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline-block <span class="token punctuation">;</span> <span class="token property">font-size</span> <span class="token punctuation">:</span> 20px <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 20px <span class="token punctuation">;</span> <span class="token punctuation">}</span> |