CSS Box Model – Ways to display an element with the display property

Preamble

This is the last article in the series about my CSS Box Model. If the previous posts focused on an in-depth analysis of an element and its properties, this article will help you have a better overview of the relationship between the elements on the site, they push each other or attract. How together, so that you can layout the elements to the most accurate position.

You can follow all the posts of the Box model series here:

Part 1: CSS Box Model – Basic for beginners
Part 2: What is CSS Box Model and box-sizing: border-box?
Part 3: CSS Box Model – Ways of displaying elements with display properties

Block and Inline

Most of you are probably familiar with these two basic types of boxes: block and inline. If you do not recognize them, then maybe you will recognize CSS lines such as display: block and display: inline

So how is block and inline different, a p tag is different from a span tag? Let’s analyze a little theory to better understand offline.

If an element has a display property of block , it will:

• Element will drop a new line.
• The Element will expand to its maximum, until it fills the void in the container that holds it. Normally we will see that the element will have the same width as its parent container.
• The properties width and height both have an effect on the element (of course, to change its width and height).
• Padding, margin and border (if any) of the element will push the surrounding elements away from it.

Many tags are already block by default, such as p , h1 , h2 , div , so by default these tags will render with properties as described above. Naturally when we call it “default”, that means we can change it.

Next, if an element has a display property of inline , then it will:

• Element will not drop new lines on the page.
• The width and height attributes will not work, so it is useless to try to assign dimensions to inline elements.
• Padding, margin, borders in the vertical direction (top and bottom) still work but will not push other inline elements away from it.
• Padding, margin and borders in the horizontal direction (left and right) still work and will still push other inline boxes away from it.

A simple example is the most visible:

Block direction and Inline direction

If talking about blocks and inline but not in the direction they are arranged, it is a bit flawed. However, this problem has many things to discuss (outside the purpose of the article), so I just mentioned some basic ideas here.

By default, when you visit a website, most of them have writing-mode as horizontal-tb , meaning that the content will be sorted from left to right (horizontal) and from top to bottom (tb: top bottom). Often we pay little attention to this, because the Vietnamese and English languages ​​both follow this direction.

With block direction, the blocks will be vertically stacked (the latter element is below the upper element). As for inline direction, the elements will be arranged side by side in a horizontal row.

Add for reference purposes: with writing-mode as vertical, the direction of the blocks will follow horizontally. However, the nature of the way it works does not change.

Attributes displayed inside (inner) and outside (outer)

Do you know that an element has 2 types of attributes that are visible inside and outside? When you write display: block; , 2 things will happen:

• Outer: you are declaring that your element is a block when interacting with surrounding elements.
• Inner: You are declaring that its direct children will be arranged in the normal way as described above (called normal flow).

Do you find it strange? Another example, when you write display: flex; , also 2 things will happen:

• Outer: you are declaring that your element is a block when interacting with surrounding elements.
• Inner: You are declaring that its direct child elements will become flex items and are arranged based on the flexbox rules.

For example

Let’s take a look at a simple example below:

In the example above, the default span tag is an inline box, so:

• It is in line with other content
• Width and height are completely ignored. Note that the CSS code does not fail in this case, it just doesn’t work.
• With the padding of 50px, you see it pushes the text around far away, but the vertical doesn’t, even though it still exists (as evidenced by its background color).
• With margin top and bottom at 100px, it’s completely ignored.

Next, we try to convert it to block:

• Because it is a block, it falls down on a new line.
• Width and height now work.
• With the padding of 50px, you see it pushes the text around away from it both horizontally and vertically.
• The margin now works.

display: inline-block

In some cases, you will want to reconcile block and inline effects. For example, you still want to customize the size of the element with width and height , but you still want it to be inline with other elements. With display: inline-block , you help the element have some properties of both block and inline.

Conclude

The article is quite long, so I do not want to cover other related issues such as “Margin collapsing”. As you can see, the basic knowledge of layout is actually very simple but maybe because it was not taught at university (in my time), very few people can understand and apply it properly. However, it is quite simple, so please take the time to understand it.