débutant en html/css, comportement incompréhensible à mes yeux

Marsh Posté le 15-10-2015 à 16:57:31

Bonjour,
Je m'appelle Nicolas,

Petite question de curiosité et aussi pour mieux comprendre html/css:

Je suis en train de me former à html css, en fait ça fait déjà quelques années que je connais html/css/php, mais je comprends mal les histoires de "margin"/"padding" etc...

J'ai remarqué que cette page:

Code :

<!DOCTYPE html>
<html>
<head>
<title>
nico test
</title>
<style type="text/css">
.bodytest {
border:0px;
margin:0px;
}
.divtest {
background-color:green;
margin:1px;
padding:0px;
border:1px;
border-style:solid;
}
</style>
</head>
<body class="bodytest" >
<div class="divtest">
<h2>comment ca marche ce truc!!!</h2>
<h1> cest trop bête ce truc</h1>
<div style="background:blue">
<h1 style="background:yellow">lalalala</h1>
</div>
</div>
</body>
</html>

Cette page changeait donc radicalement d'aspect lorsque qu'on ajoute ou retire la ligne dans le script css:

"border-style:solid;"

(C'est à dire que ça ne fait pas simplement rajouté une petite bordure d'1 pixel, mais ça change la couleur de fond)

Je pense que ce comportement est volontaire mais je n'arrive pas à savoir pour ça a été programmé ainsi?

Si quelqu'un a une idée... Merci

Reply

Marsh Posté le 15-10-2015 à 16:57:31

Reply

Marsh Posté le 15-10-2015 à 20:20:42

Oui, c'est une fonctionnalité de CSS, qu'on appelle fusion/transfert de marges (margin collapse/transfer).

Cet article l'explique plutôt bien: http://www.howtocreate.co.uk/tutor [...] collapsing

Dans ton cas, la marge en haut de l'élément <h2> ainsi que marge en bas de l'élément <h1> est transféré à l'élément <body>, au lieu d'être utilisé pour élargir le contenu du <div> contenant <h1> et <h2>, transfert, qui n'est pas fait s'il y a une bordure (comme décrit dans la spec CSS: http://www.w3.org/TR/CSS2/box.html#collapsing-margins )

L'idée derrière ça, c'est lorsqu'on a 2 paragraphes qui se suivent <p/><p/>, plutôt que d'avoir une marge entre ces 2 paragraphes qui est la somme des marges mitoyennes, on prends le maximum à la place (ça c'est la fusion de marge).

Le transfert, c'est pour prendre en compte les cas comme: <div><p/></div><p/>. Si le <div> n'a aucun style appliqué, il ne devrait avoir aucune influence sur le rendu, pourtant sans transfert de marge, l'espace entre les 2 paragraphes sera la somme des marges mitoyenne. Pour éviter ça, CSS transfert les marges dans l'éléments le plus englobant (certaines conditions s'appliquent™).

Reply

Marsh Posté le 16-10-2015 à 11:08:40

Merci pour ta réponse qui explique bien le principe!

Je vais jeter un coup d'oeil sur les pages web qui tu m'as passé.

Reply

débutant en html/css, comportement incompréhensible à mes yeux

Sujets relatifs:

Leave a Replay