css box model

What is Box model in CSS?

Thumbnail

Feb Dao

|

Imagine your website is a living room, and that each page element is an object in the room. The box-model is about taking up space of the objects in your room.

CSS Box-model

What is Box Model?

Each element in a web page is a separate rectangular block. The Box model is understood as the space occupied by the element in the web page, it is the sum of:

  1. content
  2. border
  3. padding
  4. margin

and depends on the value of the attribute box-sizing

box-sizing: A method of calculating the width, height of an element according to css, it usually takes 2 values: content-box (this is the default) or border-box

That is, the actual size of the element's rectangular block will be calculated as follows:

With box-sizing: content-box (default)

Width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

 

With box-sizing: border-box

Width = margin-left + width + margin-right
Height = margin-top + height + margin-bottom

 

Specifically, the components of the box-model are defined as follows

1. Content - Content of the element (width / height)

The content of the element is the innermost element of the box model, it could be:

- Paragraph: If the tag is a content tag such as: div, p, span, a, button ...

- Photo / video: If the tag is img, video ...

If the values of width and height are set specifically in css, then the actual value of the content displayed on the web page will depend on the value of the box-sizing property.

- box-sizing: content-box: Now the value of width, height set in css will be the value of the element's content (content)

.feb {
  width: 200px;
  height: 100px;
}
Corresponding to:
Width of content = width = 200px
Height of content = height = 100px

 

- box-sizing: border-box: Now the value of width, height set in the css will include the value of the element's content (content) + border (border) + padding.

.feb {
  width: 200px;
  height: 100px;
}
Corresponding: 
Width of content = width - (padding-left + border-left + border-right + padding-right)

Height of content = height - (padding-top + border-top + border-bottom + padding-bottom)

 

If width and height are not set specifically in css, then for elements whose display property values are block and position is static or relative ( it can be default or set in css) its width if not set in css will automatically occupy 100% with the outer element (including padding + border + margin). However, it should be noted: with ingredients with attribute values

- display is inline-block or inline

- position is fixed or absolute

- float is not none

then its width will depend on the content inside.

 

2. Border

The value of the border in terms of size will depend on the value of the border-width property

.feb {
  border: 5px solid #ccc
}

Corresponding to:

.feb {
  border-width: 5px;
  border-style: solid;
  border-color: #ccc;
}

and the value will be 5px

 

3. Padding

padding is the distance from border to the content of the element, this property can receive from 1 to 4 values simultaneously, as follows:

.feb {
  padding: 30px;
}
corresponding to:
padding-top = padding-right = padding-bottom = padding-left = 30px

.feb {
  padding: 10px 20px;
}
corresponding to:
padding-top = padding-bottom = 10px
padding-left = padding-right = 20px
.feb {
  padding: 10px 20px 30px;
}
corresponding to:
padding-top = 10px
padding-left = padding-right = 20px
padding-bottom = 30px;
.feb {
  padding: 10px 20px 30px 40px;
}

corresponding to:
padding-top = 10px
padding-left = 20px
padding-bottom = 30px
padding-right = 40px

 

4. Margin

margin is the distance from the border of one element to the border of the other element, that is, if two elements are side by side, its distance will be equal to the maximum margin of the corresponding element.

Similar to padding, the margin property can take 1 to 4 values of itself

.feb {
  margin: 30px;
}

corresponding to:
margin-top = margin-right = margin-bottom = margin-left = 30px

.feb {
  margin: 10px 20px;
}

corresponding to:
margin-top = margin-bottom = 10px
margin-right = margin-left = 20px

.feb {
  margin: 10px 20px 30px;
}
corresponding to:
margin-top = 10px
margin-right = margin-left = 20px
margin-bottom = 30px
.feb {
  margin: 10px 20px 30px 40px;
}
corresponding to:
margin-top = 10px
margin-right = 20px
margin-bottom = 30px
margin-left = 40px

Determining the correct Box-model of each element is very important in the problem of layout and position alignment.

Above is my own opinion about box-model, I hope to get everyone's feedback by commenting below the post so we can understand more about this issue.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word