The box model

Tram Ho

In the previous article we learned about sizing and color in CSS. In this article we apply sizing to one of the most important concepts in web design: box model .
Basically the browser will treat a page as a collection of different boxes containing content. Along with height and width, boxes also have properties such as borders (a border around the box), margins (distance to other boxes), and padding (the space inside the box separates with borders).
Box Model is the most basic technique in CSS Layout and is used for you to describe the distance that each element on the website is owned, or in other words, the technique of refining the display spacing for each element. on the website. In this article, we will learn some alignment methods, place the boxes side by side, and then gradually familiarize themselves with the layout of the elements of a website.

Inline vs. block

We’ll start to learn about box model by discussing the various effects of spacing and borders on inline and block elements.
If elements are considered inline elements such as span or a , margin or padding applies only to left or right (but not top or bottom), and it does not accept width or height set by CSS. As for block elements , there are no restrictions.
However, there are styles that turn the inline element into block element (such as the float property).

display: none

display: none This Style prevents an element from displaying on the page. For example we try to add style display: none to the .social-link class

When saving and refreshing the browser, we found that the social links were no longer visible. This style is often used for hiding elements in interactive websites, especially when combined with JavaScript.

To restore the visibility of the hidden element, we can set the display property to initial or block .

display: block

display: block to force an element into a block element, whatever it was before. If you don’t set the size after changing the element to display: block , it will behave like any block element by taking the full width of the parent element.
As briefly mentioned above, inline elements (such as links and span) cannot have width or height, but once we change the display property dimensional styles will be applied. To see specifically how it works, let’s try adding a height to the .social-link class.

When we save and refresh the page, we see that nothing has changed – because, .social-link is inline elements. Next, we try to add the display: block property and save it.

After saving and refreshing, we see that the .social-link class is 36 px tall, and it stretches to take up all of the parent elements space.

display: inline

display: inline will turn a block element into an inline element (it’s the opposite of display: block ). Any styles that are not applied to inline elements (eg, width and height, top margins, or padding) will have no effect on this property. It will no longer be on its own line, but merged with other inline elements.

display: inline-block

inline-block is an attribute that combines inline and block, which is a very useful property, since it allows styling that normally only works on block elements – for example, width and height, top margins, and padding and apply to a specific element. At the same time, it also allows the entire element to behave like an inline element. This means the text will still be visible around and it only takes up as much of the horizontal space it needs to store the content. (it’s the opposite of the block element – which spans all pages, unless you set the width first for them).
To see in detail how it works, we’ll set the .social-link class to display inline-block type.

When we save and refresh, we see that the link height is styled, and the width is only equal to the size containing the content.

Later we will add icons for different social media links, and we want these links to be the same width, height, whatever their content is. To do this, we need to add the width attribute to the social links.

Now, the social links will be square in size, like this:

So where and when will the website use this css? This type of inline-block declaration is especially useful when doing website navigation, or when styling a group of adjacent elements. We will continue to discuss this property in later articles.

display: flex

display: flex is a powerful property, forcing all child elements to fill the entire parent element, and is highly customizable to use for the layout. This flex property is something that solves some of the long standing problems with page layouts.
In this article, t will only introduce the concept, to understand deeply about this property, we will learn more in another article.

Margins, padding, and borders

One of the places where developers interact with the box model the most is when adding margins , padding , and borders to elements on the page – while the margin or padding properties control the space around or inside the elements. , then the border property specifies the box’s border appearance. In this article, we’ll take a look at how these styles affect the box model (including some interesting things), and in the following articles we will explore the details of how margin works in detail. , padding or border is used in practice.
We’ll start to investigate and explore the differences between padding, border, and margin. Furthermore, if you set the width of the block element, (eg div or p ) and then apply a border or padding to it, then that border or padding will be outside of the content. This means that, you may experience your element being larger than the size you specified. Maybe many people will misunderstand that, when you set the size to 200px width for example, it should always be 200px … but no, the default CSS will assume that when you set the size of the element it means that you are talking only about the content part of the element. This creates quite a lot of confusion among CSS learners, as they assume the element and its content are the same. Check out the following example:
Suppose we have a div tag, with the following style:

In this case, the entire element size will go up to 300px , including: 200px for content, 40px for each left and right padding, and 10px for each left and right border edge (200 + 40 × 2 + 10 × 2 = 300px ). We can see the following illustration:

We can fix the total width of the content box and force the border and padding inside it. To do this, we need to declare box-sizing . Specifically to see how it works, let’s try adding some elements and styles.

Then add the following styles:

When we save and refresh the browser, we get boxes of different widths. Note that the .test-box-sizing class forces the div to be 200px wide. The border-box property causes the browser to set the border and padding within the size limit we specified

Margin weirdness

Above, we talked about how box models can have unexpected behavior on borders and padding, so what about margin? Maybe you would expect that, when 2 elements have margins next to each other, their margins will always be aply correct k? For example, if 2 elements have a margin of 20px , you would probably expect that the elements will always be 20 + 20 = 40px apart – however, it won’t.

We will try to change the code, to test the way margin works as follows:

Performing save and refresh the browser, we see that the boxes are 50px apart.

Now we will remove the display property, so that the above div element drops its default style, and also remove the width styles as shown below:

As a result, the margins are collapsing dramatically, all vertically separated boxes have a margin of 50 px, as shown below:

The reason the first example works as expected is that the first 2 elements are not block elements, so the browser behaves properly according to the set margin. However, once they become block elements, the browser only allows 1 margin application.
The reason this exists is due to the early days of HTML, when all websites used default browsers for all elements (because there was no css). Some block elements (such as the paragraph p element) have upper and lower margins by default, to keep text away from other elements for easier readability. Without automatic margin reduction, whenever you place these 2 elements side by side, there will be too much distance. So it has been established that, when two block elements have consecutive margins, one of the upper or lower margins is canceled.
In the following articles, we will learn how to place boxes side by side.


In the above section, we looked at some caveats in the box model, let’s use it to style our sample website. Some of the things we often need to deal with when designing a website are, placing different elements side by side on the page, and for inexperienced developers they often have quite a bit of problems with box models.
In previous articles, t mentioned a property called float that moves the image’s position. The idea is that when we set the element by float left or right, the surrounding inline content will show up around that element floated. The floated elements will always be next to other floated elements on the same line, as long as there is enough horizontal space. If the elements are too large, it jumps to the next line.
Try this example. That is, we add the float: left property to the .bio-box class, and also set some padding and width. Below, is the latest index.html file so far, you can use it if you have not followed the last post.

After saving and refreshing the browser, we get the following results:

We see that now all the boxes are in the same row, but why does the last box overflow to the next line.
This is due to the problem with box model sizing. Here, left border, right border, left padding, right padding, have been added to the width of the div element. Let’s try to calculate the total width, 25% + 1px border-left + 1px border-right + 2% padding-left + 2% padding-right will total 29% + 2px . Multiplied by 4boxes will get 116% + 8px > 100%.
Now we try to fix it by adding a box-sizing: border-box property to the div tag, to force the border and padding inside the div tag.

When you save and refresh the browser, you will get 4 boxes on the same row of the page.

Clearing floats

So why don’t some developers want to always use floats to place elements side by side? For each element, there are only 2 options : float: left and float: right, but no float: center . This is annoying, but we all have a solution. The bigger problem is that the browser doesn’t always know where the float ends. When you float the element, you are telling the browser that you want the element to show up on the page, where it will float, but right after that starting position, you want the rest of the page content to be. display around that float element. This can disrupt the orderly arrangement of the elements and create some odd looking layouts.
For better understanding, let’s try adding a paragraphs below the </div> closing tag of the .bio-wrapper class.

When we save and refresh the browser, we see that the currently visible text is concatenated with the outermost float element rather than the display starting on the new line.

If the float elements are floated to the right using float: right , you need to clear their float by clear: right , or if more careful you can delete both types of floats using clear. : both .
If you tried removing the float with inline style on the test page, you should remove that style from the p tag – manipulating the inline style can be frustrating, but sometimes it’s a quick way to experiment with styles.
Having to add clear styles directly after any floated element (inline or stylesheet) is a bit of a trick – Especially on a dynamic site, it can pull code from multiple places to build a page. Then you won’t know which element will follow the float.
A better way to clear floats applies the rule of clearing things in the .bio-wrapper class. The idea is that we arrange the .bio-wrapper element and everything in it behaves like a Lego block – able to be safely moved around without having to worry about undelivered floats. mix layout.
There are two methods to delete float in the wrapper, they are: method overflow and “clearfix” method : after . First, we will try adding the overflow method to the .bio-wrapper class to see how it works.

Performing browser save and refresh, we find that the paragraph is reasonably visible under the float element without using inline styles or clear attributes.

The problem with this method is that if you also set the width or height on an element with overflow: hidden , the content inside might be cut off. This usually happens with dropdown menus in site navigation with floats – which are cleared using the overflow method, but the header has also been set to height. As the image below shows, the homepage dropdown will be hidden from display if we set the method overflow: hidden improperly.

Therefore, if you need to clear float, but you are worried about content being cut off, since you have to set the height for the wrapper element, then you can use : after method.
Let’s see how it works. We will remove the overflow: hidden method from the .bio-wrapper class and add a new declaration set.

The above paragraph is quite new, but we can learn it gradually and without worry. We will learn more about : after in the following articles. The important thing is : after will create a virtual element at the end of the bio-wrapper – and we can add styles to this element. Setting clear: both on this element will clear the floats and allow the content to display as intended. Finally, if you save and refresh the browser, the text will still be displayed like above.


Over. We will learn together about other topics in CSS in the next posts.
Source: Learn-enough

Share the news now

Source : Viblo