Yogesh Chauhan's Blog

The basics of CSS Box model

in CSS on March 1, 2021

In HTML doc, each box has a content area that includes its content for e.g. text, an image, child boxes, or other element content. It also contains optional surrounding area such as padding, border, and margin areas.

The size of each of those areas is specified by their corresponding properties. We can set those property values as zero or even negative in the case of margins.

The following diagram shows how these areas relate and the terminology used to refer to the various parts of the box:

Diagram of a CSS box model with the content, margin, padding, and border
Image Source: w3.org

The margin, border, and padding can be broken down into top, right, bottom, and left segments. We can control each segment by its corresponding property.

The perimeter of content, padding, border, and margin is called an edge.

Each edge can be broken down into a top, right, bottom, and left side.

Each box has four edges each composed of four sides.

1. content (inner) edge

The content edge created by the width and height of the box, which often depend on the element’s content. The four sides of the content edge together define the box’s content box.

2. padding edge

The padding edge circles around the box’s padding.

If the padding is zero then the padding edge and the content edge overlaps – they essentially become the same lines.

The four sides of the padding edge together make the box’s padding box, which contains both the content and padding areas.

padding box = content + padding

3. border edge

The border edge circles around the box’s border.

If the border is zero then the border edge intersects with the padding edge.

The four sides of the border edge together make the box’s border box, which contains the box’s content, padding, and border areas.

border box = content + padding + border

4. main (outer) edge

The margin edge circles around the box’s margin.

If the margin is zero then the margin edge intersects with the border edge.

The four sides of the margin edge together make the box’s margin box, which contains the all of the box’s content, padding, border, and margin areas.

margin box = content + padding + border + margin

Few more things to know…

  • The background of the content, padding, and border areas of a box is specified by its background properties.
  • The border area can additionally be painted with a border style using the border properties.
  • Margins are always transparent.

Credit: w3.org


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Debugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressHow to add menu to your WordPress theme?WordPressHow to create a dynamic countdown using HTML and JavaScript?HTMLHow to load variables, functions, and mixins from another module in SCSS?SCSSLearn to Implement Estimated Reading Time using PHP Part 1: The BasicsPHPThe Difference Between isNaN() Method And isNaN() Function In JavaScriptJavaScript