CSS - marge et propriété flottante

Nous avons un div avec positionnement statique. À l'intérieur, nous avons un paragraphe avec une marge. La hauteur de la div sera le paragraphe sans la margeCSS - marge et propriété flottante
Nous avons une div avec flotteur: à gauche. À l'intérieur, nous avons un paragraphe avec une marge. La hauteur de la div sera le paragraphe plus sa marge.

Quelle est l'explication de cela?

Voici le code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="index.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="nivel1"> 
<div id="nivel21"> 
    <p>Este es el primer parrafo</p> 
</div> 
<div id="nivel22"> 
    <p>Este es el primer parrafo</p> 
</div> 
</div> 

</body> 

</html>

Et le code CSS:

body { 
    margin:0; 
    padding:0; 
} 

#nivel1 { 
    border:solid; 
    border-color:#333; 
    margin:0; 
    background-color:#0F3; 
    margin:2em; 
} 

#nivel21 { 
    margin:2em; 
    float:left; 
    background-color:#C00; 

} 

#nivel22 { 
    margin:2em; 
    background-color:#FC0; 
}

Et voici un link sur le site de test.

Source

2010-04-29 David Casillas

Quelle est votre question? – alejandrobog

Pourriez-vous décrire ce que vous essayez d'accomplir? –

La question est: pourquoi changer le div de statique en flottant change la façon dont il calcule sa hauteur. J'essaie juste de comprendre en expérimentant les choses de positionnement et de mise en page. Désolé si je ne le fais pas clairement dans mon message. –

Je pense que lorsque vous utilisez la propriété float, les tampons du navigateur, l'élément à afficher est flottant.

Source

2010-04-29 22:43:55

Que voulez-vous dire par "pads the element"? Ce qui semble justement arriver, c'est que le div flottant calcule sa hauteur (comme vous pouvez le voir par la couleur de fond) comme le parragraphe interne plus sa marge, tandis que le div non flottant juste le parragraphe sans sa marge. Il n'y a pas de rembourrage ici. –

ce que je voulais dire, c'est que le navigateur peut augmenter en interne le rembourrage haut et bas pour montrer visuellement que l'élément est flottant et n'est pas en ligne avec les autres, mais je suis juste en train de tirer dans l'obscurité: P –

Eh bien, puisqu'il n'y a pas de question et pas de dénomination claire de vos éléments, je suppose que vous voulez mettre 2 colonnes dans un conteneur. Nettoyé code avec un peu plus clair nommage et l'utilisation des résultats dans les classes ceci: (espérons que c'est ce que vous recherchez)

<html> 
    <head> 
    <title>divs</title> 
    <style> 
     .container{ 
     float: left; 
     background-color: #0F3; 
     } 
     .column { 
     margin: 2em; 
     float: left; 
     padding: 5px; 
     } 
     #lefty{ 
     background-color: #C00; 
     } 
     #righty{ 
     background-color: #FC0; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div id="lefty" class="column"> 
     <p>Column number 1</p> 
     </div> 
     <div id="righty" class="column"> 
     <p>Column number 2</p> 
     </div> 
    </div> 
    </body> 
</html>

Source

2010-04-29 23:03:32

ne m'explique pas clairement. J'essaie juste d'apprendre les propriétés CSS. J'ai découvert que lorsque je passais d'un div de statique à flottant cela changeait la façon dont sa hauteur était calculée, donc j'ai juste fait une page de test avec deux div égaux, un statique et un flottant pour étudier les différents comportements. Je sais maintenant clairement ce qui se passe avec Safari Web Insector, le div flottant ajoute à sa hauteur le parragraphe interne plus sa marge, alors que le statique n'ajoute pas la marge interne du parragraphe. Pourquoi cela arrive? –

Je pense que vous vous méprenez sur les marges. Une marge est ajoutée à l'extérieur d'une boîte, ce qui augmente la distance entre son parant ou ses frères et sœurs. Le rembourrage est une sorte de marge intérieure, ce qui augmente la distance que les enfants ont par rapport à leurs frontières. Donc, la question est vraiment pourquoi le rouge est plus grand, pas pourquoi le jaune est plus petit;) –

Ok, maintenant que nous avons une bonne question, serait agréable d'entendre une réponse si l'un d'entre vous peut donner une explication. En tout cas merci, et je vais essayer d'être plus précis la prochaine fois. –

Cela se produit à cause de l'interaction des deux divs. Enlevez le flottant, le statique se rétrécira. Ce qui se passe est que le div flottant pousse le texte dans le div statique, l'élargissant ainsi.

Autres commentaires: La balise de paragraphe n'est pas pertinente ici. Vous pouvez obtenir le même effet en supprimant la marge de paragraphe et en augmentant la marge pour les éléments eux-mêmes. D'une manière ou d'une autre, l'élément positionné de manière statique croîtrait alors que l'élément flottant ne le ferait pas. Même chose avec ce CSS:

body { 
    margin:0; 
    padding:0; 
} 

p { 
    margin: 0; 
} 

#nivel1 { 
    border:solid; 
    border-color:#333; 
    margin:0; 
    background-color:#0F3; 
    margin:2em; 
} 

#nivel21 { 
    margin:5em; 
    float:left; 
    background-color:#C00; 

} 

#nivel22 { 
    margin:5em; 
    background-color:#FC0;

}

Source

2013-10-16 00:02:33 osa

Il y a un '}' en bas de votre réponse. –

Après plusieurs modifications, je pense avoir obtenu la réponse maintenant :)

J'ai aussi vécu ce comportement déconcertant. Je pense qu'une partie de l'explication est en section 10.6.7 of the CSS2.1 spec:

Dans certains cas (voir, par exemple, les articles 10.6.4 et 10.6.6 ci-dessus), la hauteur d'un élément qui établit un contexte de mise en forme du bloc est calculée en tant que suit:

S'il n'a que des enfants au niveau en ligne, la hauteur correspond à la distance entre le haut de la boîte de ligne supérieure et le bas de la boîte de ligne la plus basse.

Si elle a des enfants au niveau du bloc, la hauteur est la distance entre la partie supérieure marge bord de la boîte de l'enfant au niveau du bloc le plus élevé et le fond marge bord de la plus basse bloc- boîte enfant niveau.

Ces "cas particuliers" énumérés au paragraphe 10.6.6 comprennent des éléments flottants.

L'élément #nivel21 en question est un élément flottant, et il contient les enfants de type bloc (une ), donc cette règle spéciale cas est appliquée et la hauteur de la <div> est calculée en utilisant le haut et margin- bas bords de l'étiquette .

En second lieu, this page about collapsing margins peut donner un indice quant à la raison pour laquelle la hauteur de #nivel22 ne pas comprennent les marges de la balise :

Le [...] la marge supérieure sur l'élément p efficace devient la marge supérieure de l'élément div, et pousse la div bas de la page [...]

la balise  a une marge implicite (10px dans mes tests), qui a besoin de s'effondrer la marge 2em l'extérieur #nivel1 élément, donc pour cette raison, le navigateur prétend que la balise  n'a aucune marge (elle le place sur #nivel22 à la place), ce qui signifie que la hauteur de #nivel22 se réduit à la hauteur de ligne de la balise . J'espère que cette réponse a du sens pour quelqu'un d'autre que moi!

Source

2014-04-15 12:43:45 chris

CSS - marge et propriété flottante

Répondre

Questions connexes