Propriété de marge et de remplissage CSS HTML

J'utilise CSS pour créer une mise en page de 3 colonnes avec en-tête et pied de page. Prenez la div Left_Col, par exemple, qui a une largeur de 200px. Je voudrais avoir un remplissage gauche et droite de 10px pour ce div tel que le texte dans Left_Col commence essentiellement au pixel 10 et s'enroule au pixel 190.Propriété de marge et de remplissage CSS HTML

Dans l'exemple ci-dessous, pour y parvenir, je crée un autre NEST DIV dans le div Left_COL et définissez la marge à StdMargin (10px). Cela fonctionne, mais j'ai pensé à une autre alternative pour obtenir le même résultat, à savoir renoncer à la division interne interne "stdMargin" et ajouter un attribut "padding 10px" à la div Let_Col. Cependant, j'ai été déçu que cela semble augmenter la largeur de la div LEFT_COL au-delà de sa largeur de 200px définie et donc chevauchement avec le div CONTENT milieu, ce qui n'est pas ce que je voulais.

Pourquoi cela se produit-il? Existe-t-il un moyen d'éviter le div interne imbriqué? Trop d'objets imbriqués et je Constatez traversais aux yeux ...

Voici ma page css:

/* CSS layout */ 
body { 
/* 
margin: 0; 
padding: 0; 
*/ 
margin: 0 auto; 
width: 1000px; 
} 

#masthead { 
background-color:aqua; 
} 

#top_nav { 
background-color:Yellow; 
} 

#container { 
background-color:maroon; 

} 

#left_col { 
width: 200px; 
float: left; 
background-color:#99FF33; 
} 

#page_content { 
margin-left: 200px; 
margin-right: 200px; 
background-color:#99CCFF; 
} 


#right_col { 
width: 200px; 
float: right; 
background-color:#F1E2E0; 
} 


#footer { 
clear: both; 
background-color:#BBBBFF; 
} 

.stdmargins{ 
margin:5px; 
}

Et voici le code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<title>masthead</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<link href="3Column.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="PageWidth"> 

<div id="masthead"> 
</div> 
<div id="top_nav"> 
<div class="stdmargins"> 
    Top Nav</div> 
</div> 
<div id="container">Container 
<div id="left_col"> 
    <div class="stdmargins"> 
    Left Column Top<br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    Left Col bottom<br /> 
</div> 
</div> 
<div id="right_col"> 
<div class="stdmargins"> 
    Right top<br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    Right bott<br /> 
</div> 
</div> 
<div id="page_content"> 
    <div class="stdmargins"> 
    </div> 
</div> 
</div> 
<div id="footer"> 
Footer</div> 

</div> 

</body> 

</html>

Source

2009-11-26 ChadD

Soustraire le rembourrage de la largeur. Donc, si vous voulez que le div finissent par être 200px de large, il est:

padding: 10px; 
width: 180px; /* 200 - 10 - 10 */

Ce diagramme est utile: http://www.w3.org/TR/CSS21/box.html#box-dimensions

Source

2009-11-26 18:10:46 Caleb

Selon les spécifications du modèle de boîte CSS, le comportement par défaut à un élément qui a un rembourrage appliqué est d'augmenter sa largeur et sa hauteur. Cela dit, vous devrez toujours vous soucier de la dimension de l'élément et diminuer la largeur en fonction de la quantité de paddings gauche et droite que vous avez appliqué. Par exemple: si vous avez un div avec 200px et un padding de 10px, le total width sera 220px.

Toutefois, vous pouvez modifier ce comportement en définissant la règle CSS3 «taille de boîte», qui rend votre élément à pas résumer le remplissage à la largeur/hauteur finale. Vous pouvez consulter la page de mozilla sur le sujet: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing. Mais attention: il ne fonctionne pas dans les anciens navigateurs comme par exemple IE 7. Si la compatibilité vers l'arrière n'est pas un problème pour vous, allez tout droit. Il existe une solution de contournement si vous ne voulez pas soustraire la largeur/hauteur de votre colonne de la largeur de remplissage: vous pouvez créer un div wrapper à l'intérieur et lui appliquer le remplissage ou attacher le remplissage aux éléments internes, pas le div lui-même.

<div id="column" style="width: 200px"> 
    <ul style="padding: 10px"> 
     <li>Some text</li> 
     <li>Some more text</li> 
     <li>Even more text</li> 
    </ul> 
</div>

De cette façon, vous ne serez pas à vous soucier de recalculer les dimensions des éléments lorsque vous avez besoin de changer la taille de remplissage, par exemple.

Source

2013-07-22 17:06:02 darksoulsong

Propriété de marge et de remplissage CSS HTML

Répondre

Questions connexes