Detailed explanation of CSS box model properties: padding, margin and border

Detailed explanation of CSS box model properties: padding, margin and border

In CSS, the box model property (box model) refers to the space occupied by an HTML element. This space consists of 4 important properties: padding, margin and border. Understanding what these properties do and how to use them can help us better control the size and layout of elements. This article explains these properties in detail and provides specific code examples.

1. Padding (Padding)

The Padding property controls the distance between an element's content and its edges. It can set different values ​​for the top, bottom, left and right of the element, or it can be set to the same value uniformly. Here is a sample code:

.box {
  padding: 10px; /* 上下左右都为 10px */
}

.box {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 50px; /* 分别指定上右下左的值 */
}

2. Margin (margin)

The Margin property is used to control the distance between an element and surrounding elements. It can set different values ​​for the top, bottom, left and right of the element, or it can be set to the same value uniformly. Here is a sample code:

.box {
  margin: 10px; /* 上下左右都为 10px */
}

.box {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 50px; /* 分别指定上右下左的值 */
}

3. Border (border)

The Border property is used to add a border to an element. It has three sub-properties: border-width (border width), border-style (border style) and border-color (border color). These three properties can be specified at the same time or individually. Here is a sample code:

.box {
  border: 1px solid black; /* 宽度为 1px，实线样式，黑色边框 */
}

.box {
  border-width: 2px;
  border-style: dashed;
  border-color: red; /* 依次指定宽度、样式和颜色 */
}

Box model properties play an important role in layout and design. By flexibly using padding, margin, and border properties, we can control the spacing, border style, and size between elements to achieve rich and diverse page layout effects.

In practical applications, it is very important to understand and master the use of these attributes. Hopefully the explanations and examples in this article will help readers better understand and use CSS box model properties.

The above is the detailed content of Detailed explanation of CSS box model properties: padding, margin and border. For more information, please follow other related articles on the PHP Chinese website!