CSS Box Model

CSS Box-Model is a container which contains multiple properties itself; basically, all HTML elements can be considered as boxes BUT The Box-Model is used to create the design and layout of web pages including properties like:

• Content: The content area contains the real content of the element, such as Text, Image, Audio, Video player, etc.
• Padding: The padding contains the space around the content within the border box.
• Border: The border is used to create a border between the box’s padding and margin.
• Margin: The margin area contains the space outside the border box.

For more understanding about box-model then see the below image, it represents the basic box-model of the content element:

Box-Model Example

.myDiv {
     width: 300px;
     padding: 15px;
     margin: 15px;
     border: 10px solid #808080;
  }

Output

Normal Paragraph

Technology is the sum of techniques, skills, methods, and processes used in the production of goods or services or in the accomplishment of objectives, such as scientific investigation.

Paragraph with Box-Model Property

Technology is the sum of techniques, skills, methods, and processes used in the production of goods or services or in the accomplishment of objectives, such as scientific investigation.

Example Explanation

• The total width of the <p> element is 300px BUT the normal <p> element is cover 100% width of it.
• The padding: 15px creates space between border & content element; The margin: 15px creates space between border and margin areas BUT the normal <p> cover all areas of the content.

Width and Height of Elements

Set the width and height of an element using the CSS width and height properties.

NOTE: When you set the width and height of an element with CSS width and height property, you just set the width and height of the content area BUT if you want to calculate the full size of an element, you must also add padding, borders and margins.

Box-Size CSS Properties

• Total element width = width + left padding + right padding + left border + right border + left margin + right margin
• Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin