Εισαγωγή στο μοντέλο κουτί CSS
- Προηγούμενη σελίδα Λίστα CSS
- Επόμενη σελίδα Περιθώριο εσωτερικό CSS
The CSS Box Model (Box Model) specifies how element boxes handle element content,Padding,Border and Margin in the way.
Εισαγωγή στο μοντέλο κουτί CSS
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 does not block any elements behind it.
Tip: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 are set by the user agent stylesheet. You can override these browser styles 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 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. See the diagram below:
#box {
width: 70px;
margin: 10px;
padding: 5px;
Tip:Padding, border, and margin can be applied to all sides of an element or to a single side.
Tip:The margin can be negative, and in many cases, negative margins need to be used.
Browser compatibility
Once a proper DTD is set for the page, most browsers will display the content as shown in the above diagram. 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.
Αν και υπάρχει τρόπος να λύσουμε αυτό το πρόβλημα. Ωστόσο, η καλύτερη λύση αυτή τη στιγμή είναι να αποφύγουμε το πρόβλημα. Δηλαδή, δεν προσθέτουμε περιθώρια εσωτερικά με καθορισμένη πλάτος στο στοιχείο, αλλά προσπαθούμε να προσθέσουμε περιθώρια εσωτερικά και εξωτερικά στους γονείς και τα στοιχεία των στοιχείων.
Μετάφραση όρων
- element: στοιχείο.
- padding: περιθώριο εσωτερικό, υπάρχουν επίσης έγγραφα που το μεταφράζουν ως καλυπτικό.
- border: περιθώριο.
- margin: εξωτερικό περιθώριο, υπάρχουν επίσης έγγραφα που το μεταφράζουν ως κενό ή περιθώριο κενό.
Στο codew3c, ονομάζουμε ομοιόμορφα το padding και το margin ως περιθώρια εσωτερικά και εξωτερικά. Το κενό εντός του περιθωρίου είναι το περιθώριο εσωτερικό, το κενό εκτός του περιθωρίου είναι το περιθώριο εξωτερικό, εύκολο να θυμάσαι:))
- Προηγούμενη σελίδα Λίστα CSS
- Επόμενη σελίδα Περιθώριο εσωτερικό CSS
