4
Je comprends que la hauteur d'une boîte en CSS est la hauteur du contenu, excluant la marge et le remplissage, mais pourquoi avec cet exemple, si vous décommentez la bordure: ligne dans la div contenant, fait la couleur de fond de la div étendre au-dessus du premier paragraphe tandis que si vous n'avez pas de frontière, il ne le fait pas?Pourquoi la bordure affecte-t-elle la taille du bloc conteneur dans CSS?
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title></title>
<style type="text/css">
#container {
background-color: green;
/* border: black solid 1px; */
}
p { background-color: red;
margin-top:50px;
margin-bottom: 0px;
border: black dotted 3px;
}
</style>
</head>
<body>
<div id="container">
<p>first paragraph</p>
<p>second paragraph</p>
</div>
</body>
</html>
@Konrad Rudolph, il n'a pas la largeur et la hauteur de jeu à l'élément #container ainsi tailles sont inutiles . – eugeneK
Mais pourquoi la présence ou l'absence de la bordure seule modifie-t-elle la quantité de vert d'arrière-plan visible au-dessus du premier paragraphe. Je veux comprendre le pourquoi ici - je n'essaie pas d'obtenir un résultat particulier. Merci! – user342492
@aizuchi, vous avez beaucoup d'erreurs dans le code CSS. Il est difficile de dire pourquoi, sauf si vous corrigez une erreur. Le modèle de boîte (la façon dont le navigateur calcule la taille de certains éléments) est différent pour IE.6 (et ci-dessous) et d'autres navigateurs. Cela signifie que si vous donnez une largeur et une hauteur spécifiques, puis que vous appliquez une marge, en remplissant une bordure, chaque navigateur affichera différemment. Puisque vous ne nous avez pas fourni d'informations sur le navigateur que vous utilisez, nous ne pouvons pas vous aider autant que – eugeneK