YogeshChauhan . com

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

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to convert a function component into a class in React?ReactWhat is ECMAScript?JavaScriptFULL OUTER JOIN in PostgresPostgresHow to create rotating texts using JavaScript and CSS?CSSHow to get the height and width of an element using JavaScript?JavaScriptHow to insert Bootstrap 4 in Angular 9 app?Angular