YogeshChauhan.com

The basics of CSS Box model

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

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to Skip or Exclude a Specific URL or File From .htaccess Rewrite Rule?PHPHow to Display Related Posts in WordPress?WordPressHow to get the height and width of an element using JavaScript?JavaScriptINTERSECT and EXCEPT in PostgresPostgresHow to detect if browser supports WebP format on server side PHP script?PHPHow to host Google fonts on your server and add them using CSS?CSS