HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

CSS Box Model

The CSS Box Model is a fundamental concept in web design and layout. It describes the structure of an HTML element as a rectangular box with four main components: content, padding, border, and margin. These components surround the actual content of the element and contribute to its overall size and spacing within a layout.

The four components of the CSS Box Model are:

box-modle1

Explanation of the different parts:

  • Conten
  • Padding
  • Border
  • Margin

Content

  • The innermost part of the box that contains the actual content of the element, such as text, images, or other media.
  • The width and height properties define the dimensions of the content area.Padding:

Padding

  • The padding is the space between the content and the border.
  • The padding property is used to set the padding for an element, and it can have values for the top, right, bottom, and left sides.

Border

  • The border surrounds the padding and content.
  • The border property is used to set the border of an element, and it can have properties like border-width, border-style, and border-color to define the border's appearance.

Margin

  • The margin is the space outside the border. It provides clearance between the element's border and adjacent elements in the layout.
  • The margin property is used to set the margin for an element, and it can have values for the top, right, bottom, and left sides.

Example

div {
  width: 200px;
  border: 15px solid pink;
  padding: 30px;
  margin: 10px;
}
You can click on above box to edit the code and run again.

Output

Demonstration of the box model:

This text is the content of the box. We have added a 30px padding, 10px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.