CSS Box Model

The div + css layout is based on the CSS box model.

Box model plane diagram :

CSS box model plane diagram

The box model consists of five parts: margin, border, padding, background, and content. The frame model consists of five parts: outer, border, padding, background, and content.

Box Model Element Description:

Value Description
margin Outer margins, extra "margins" around the perimeter of the border, transparent and invisible, can be any length unit as well as a percentage or a negative value
border Border The solid frame of a frame model that contains the padding and content elements
padding The "Blank" area between the padding, the content, and the border can display the background and can be any length unit but not a negative value
background Background, the background of the box model, the scope of which contains the content, padding and border to border
content Content text, such as specific text and images

Box model overview

With the above box model, we can facilitate the layout of the page content.

p {
    width: 90%;
    padding: 5px 2px 5px 2px;
    border: 1px dashed #999999;
    color: #ff0000;	
  • width: <p> paragraph width is set to 90%, fold at 90% of the width
  • padding: the margin "top right bottom left" : 5px 2px 5px 2px
  • border: 1px border, and set the dotted line, the color is #999999
  • color: The font color in the paragraph is #FF0000

Block-level elements

A block model or a top-level element in a CSS can apply the frame model.

In HTML tag elements, can be divided into three categories :

  • Block-level elements : Block-like elements, such as h1 ~ h6, p, div, and ul, can exist independently and are separated by newlines. They are block-level elements,
  • Top-level elements : like html, body, and frames, are top-level elements that behave like block-level elements and apply to box models
  • Inline elements : refers to the attachment of other block-level elements exist, immediately after the element between the show without line break. Commonly used inline elements include img, span, li, br and so on

CSS box model size calculation

The default size of the frame model

In the box model, the margins, borders, and padding default to zero, and the content size is calculated based on the actual length of the content.

Although the inside and outside margins default to zero, but the browser usually has its default settings. For example in the Firefox browser, ul tag have the default padding value, but IE browser is not, otherwise there will be compatibility issues.

The following styles will overwrite browser default settings:

* {
	margin: 0;
	padding: 0;

Box model dimensions

In this box model, the total width is 100px. The dotted line is border, the width is 80px, the blue box is content, and the width is 70px.

The corresponding CSS is as follows:

#div1 {
   width: 70px;
   margin: 10px;
   padding: 5px;

Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.