CSS-Fensterrahmenmodell-Übersicht

The CSS box model (Box Model) specifies how the element box handles element content,Padding,Border and Margin in the way.

CSS-Fensterrahmenmodell-Übersicht

CSS-Fensterrahmenmodell

The innermost part of the element box is the actual content, directly surrounded by padding. Padding presents the background of the element. The edge of the padding is the border. Outside the border is the margin, which is transparent by default and therefore does not block any elements behind it.

Hint:Background is applied to the area composed of content and padding, border.

Padding, border, and margin are optional, with a default value of zero. However, many elements will have their margins and paddings set by the user agent stylesheet. These browser styles can be overridden by setting the margin and padding of the element to zero. This can be done separately or by using a universal selector to set all elements:

* {
  margin: 0;
  padding: 0;
}

In CSS, width and height refer to the width and height of the content area. Increasing padding, border, and margin does not affect the size of the content area, but increases the total size of the element box.

Assuming that each side of the box has a margin of 10 pixels and a padding of 5 pixels. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, please see the following figure:

CSS-Fensterrahmenmodell-Beispiel 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Hint:Padding, border, and margin can be applied to all sides of an element or to a single side.

Hint:The margin can be negative, and in many cases, negative margins must be used.

Browser compatibility

Once a page has been set with an appropriate DTD, most browsers will display the content as shown in the diagram above. However, the display of IE 5 and 6 is incorrect. According to the W3C specification, the space occupied by the element content is set by the width attribute, while the padding and border values around the content are calculated separately. Unfortunately, IE5.X and 6 use their own non-standard model in quirks mode. The width attribute of these browsers is not the width of the content, but the total width of the content, padding, and border.

Es gibt Methoden, um dieses Problem zu lösen. Aber die beste Lösung ist derzeit, das Problem zu vermeiden. Das bedeutet, dass Sie keine Innenabstände mit angegebener Breite zu den Elementen hinzufügen, sondern versuchen, Innenabstand oder Außenabstand zu den übergeordneten und untergeordneten Elementen hinzuzufügen.

Terminübersetzung

  • element: Element.
  • padding: Innenabstand, wird manchmal auch als Füllung übersetzt.
  • border: Rahmen.
  • margin: Außenabstand, wird manchmal auch als Leerraum oder Leerraumrand übersetzt.

Bei codew3c bezeichnen wir padding und margin einheitlich als Innenabstand und Außenabstand. Der leere Raum innerhalb der Kante ist der Innenabstand, der leere Raum außerhalb der Kante ist der Außenabstand. Das ist leicht zu merken: ）