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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to define visibility for a property in PHP?PHPWordPress: How to set WP_SITEURL?WordPressHow to create a Star Ratings using CSS?CSSHow to refresh a page using PHP at regularly occurring intervals?PHPCasting in PostgreSQLPostgresWhat is Zdog?Miscellaneous