CSS Box Model – Basic for beginners

Tram Ho

Preamble

This is my first blog post, hope you guys will give me ideas to improve in the next post.

This article is aimed at beginners or has very little experience with web interface programming. CSS Box Model is one of the very basic knowledge that any frontend developer needs to master.

I will write a series of 3 articles about CSS box models, the next articles will be posted soon.

Theory & Terminology

Any element is a rectangle

If you are a beginner, one thing you should keep in mind is that any element on a web page, is displayed in a browser by the browser. That means, if you insert a circle, add an oval, or try to circle the element, the browser still treats it as a rectangle. And with a rectangle, you will have the parameters that come with it such as width and height , border edges … But that is not enough, the browser still needs to know the parameters. Other information such as the thickness of the border, the width of the content inside … to be able to render the layout exactly as you want.

Basic CSS Box model

The image above is a bit confusing and hard to remember if you work less with the box model, but it’s actually nothing complicated at all. You can remember this simple: I have the innermost content, wrap it as padding (if any), next layer is the border , next layer is the margin (if any). It’s like a multi-tiered hamburger. The important thing is that their order is correct and always is, there’s no way to change the order.

The above terms may be temporarily explained as follows:

  • content (or content area): is the content area of ​​an element, with width / height defined by width and height attributes. This area usually contains text, images, videos, etc.
  • padding (or padding area): indicates the width of the padding area surrounding the content area.
  • border (or border area): indicates the width (and style) of the border surrounding the padding area.
  • margin (or margin area): indicates the width of the margin area surrounding the border area.
  • edge : is the outer boundary of each region, this term is not really in the model box but is just given to explain it more easily. You can skip it without any worries.

As a developer, you can easily see these properties of elements very intuitively through the browser DevTools. If you don’t know how to open your browser devtools, there are many ways to do it (with Chrome):

  • Right-click on the web page, select “Inspect”
  • With MacOS, you can press the key combination: Option + Command + I
  • For Windows, you can press the key combination: Ctrl + Shift + I

Box model is visually illustrated on the browser devtools.

CSS properties

Illustration of margin and padding

Margin properties: margin-top , margin-right , margin-bottom , margin-left , and margin

These properties determine the width of the margin area surrounding the element. Its commonly used value is px (pixel),% (percentage), em, auto … One special thing about margin (compared to padding) is that the margin can receive negative values.

Normally, we will use the margin attribute to quickly define all 4 directions, instead of having to define 4 directions of top, right, bottom and left individually. However, in some cases you will want to use only one direction.

If you find it difficult to remember the order of the values ​​corresponding to which direction, then remember the following 2 rules:

  1. The rule of clockwise, starting at 12 o’clock (top): with margin: 10px 15px 30px 40px; , the values ​​will be top, right, bottom, left, respectively.
  2. The rule of symmetry, top is symmetrical with bottom, left is symmetrical with right: with margin: 10px 15px; , top and bottom are 10px, left and right are 15px.

Note that the first rule also applies to padding, border, border-radius … more.

Padding properties: padding-top , padding-right, padding-bottom , padding-left , and padding

These properties determine the width of the padding area surrounding the element. Its commonly used values ​​are px (pixel),% (percentage), em. Unlike margin, padding does not accept negative values ​​or auto.

Similarly padding can also be abbreviated:

Border properties:

Border has a lot of special properties but it is quite easy to understand and remember:

Commonly used attributes are abbreviated attributes: border-top , border-right, border-bottom , border-left , and border

As the above example, to declare border, you need to provide 3 necessary information, but you can still ignore the color without declaration, its default value will be initial , and will be inherited. from the color of the element itself or its parent (CSS Inheritance):

  • width: the thickness of the border (1px …)
  • style: border types such as solid , dashed , dotted , double , none
  • color: border color such as #ccc , black , rgba(100, 100, 100, 1)

In addition to the common attributes above, you can specify width, style, and color with the following properties: border-width , border-style , border-color , border-top-width , border-top-style , border-top-color … and so on for the right, bottom, left directions.

For example

Basic properties of CSS box models.

I started with a simple example like the picture above (the 2 elements are the same, the picture on my left is inspected by devtools only). With a simple element as above, its shortened CSS would be:

If you wonder why width: 100px; is the content in the back, then I have a detailed analysis article about box-sizing in CSS box model offline. Here I explain briefly that all elements are assigned the box-sizing with the default value of content-box , so the width attribute will be the content area inside, not padding or borders .

However , currently using box-sizing: border-box; It is almost a default of the frontend developer (although it is not the default), so you will see less results like the above example, but instead will be as follows:

CSS box model with box-sizing: border-box;

Its CSS is no different than above, just add a box-sizing definition line:

With box-sizing: border-box; (compared to the content box) by default, width: 100px; will include both the padding and the border area , which is the basic difference between border-box and content-box

End

CSS Box model is a knowledge (or technique) that almost 90% will be used in any task about web layout. Although simple and basic, but do not take it lightly. Please take the time to master it so that your CSS code will be less buggy, easy to read, maintain and expand in the future.

Share the news now

Source : Viblo