Introduction au modèle de boîte CSS

1. La différence entre margin et padding :

Lorsque nous imaginons une page Web comme un mur, le contenu de la page Web peut toujours être résumé comme étant composé de cases, comme le montre la figure :

Sortez une boîte séparément et vous constaterez qu'elle se compose de quatre parties : marge, bordure, marge intérieure et contenu :

Ce qui est marqué par la ligne rouge ici est la marge (marge), ce qui est marqué par la ligne grise vers l'intérieur est la bordure (bordure), ce qui est marqué par la ligne bleue est la marge intérieure (remplissage), et quoi est marqué plus vers l'intérieur est le contenu spécifique (contenu), est-il très similaire à la photo ? À ce stade, vous pouvez également penser que la boîte dans le modèle de boîte est un bloc (div), composé du cadre photo, de la photo, de la distance entre le cadre photo et le mur extérieur et de la distance entre la photo. le cadre et la photo.

2. Exemple :

1,

div
{

margin:3px 5px 6px;
padding:4px 6px;
border-width:6px;
border-color:black;
width:500;
heigth:300;
}

Cette définition CSS décrit une telle boîte :

La distance entre sa marge et le haut est de 3 pixels, la distance entre la marge et les parties gauche et droite est de 5 pixels, et la distance entre la marge et le bas est de 6 pixels

sa largeur de bordure est de 6 pixels, et la couleur de la bordure est noire

La distance entre son remplissage et les bordures supérieure et inférieure est de 4 pixels, et la distance entre les bordures gauche et droite est de 6 pixels ; 🎜>

La taille de la photo est de 500* 300

2. Description de la valeur par défaut de la boite, en prenant comme exemple la marge :

margin:4px;

signifie que la distance entre la boîte et les marges supérieure, droite, inférieure et gauche est de 4 pixels.

margin:4px 6px;

signifie que la distance entre la boîte et le les marges supérieure et inférieure sont de 4 pixels, et la distance entre les marges droite et gauche est de 6 pixels

margin:4px 5px 6px;

signifie que la distance entre la boîte et la marge supérieure est de 4 pixels, la distance entre les marges droite et gauche est de 5 pixels et la distance depuis la marge inférieure est de 6 pixels

margin:4px 5px 6px 7px ;

signifie que la distance ; entre la boîte et la marge supérieure est de 4 pixels, la distance depuis la marge droite est de 5 pixels, la distance depuis la marge inférieure est de 6 pixels et la distance depuis la marge gauche est de 7 pixels

;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!