Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Applications Applications Navigateurs web firefox et box model

firefox et box model

1 réponse
Avatar
jmoteuchi
Bonjour,

j'ai un résultat un peu bizarre dans firefox.

Un petit rappel :
<URL:http://www.yoyodesign.org/doc/w3c/css2/box.html#box-dimensions>

Le padding est la boîte d'espacement. Ce qui correspond à un espace à
l'intérieur d'une boîte.

Voici une feuille de style banale et un fichier html tout aussi banal :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

* {
margin: 0;
padding: 0;
border: 0;
}

body {
background: #000;
color: #000;
text-align: center;
}

#corps {
width: 600px;
color: #999;
margin-left: auto;
margin-right: auto;
text-align: justify;
background: #fff url("images/bg_contenu_bw.png") repeat-y top;
}
-->
</style>
</head>

<body>
<div id="corps">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis
nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</body>
</html>

(Pour information l'image fait 600x15 px).

Le probleme survient quand je rajoute "padding: 10px;" à #corps.
Firefox m'agrandit cette derniere boite à 620px, alors que "normalement", il ne
devrait pas.
ex: <URL:http://secworld.free.fr/temp/box_model.png>

Un probleme de box model ?? ou je ne sais plus faire de css...

Olivier

--
"Its not broken!"
"Right, lets fix it anyway"

Windows developpment team
Signaler un problème avec ce contenu

1 réponse

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Pascal Chevrel
Le 22/03/2005 19:41, Olivier NOEL a ecrit :
(Pour information l'image fait 600x15 px).

Le probleme survient quand je rajoute "padding: 10px;" à #corps.
Firefox m'agrandit cette derniere boite à 620px, alors que "normalement", il ne
devrait pas.
ex: <URL:http://secworld.free.fr/temp/box_model.png>

Un probleme de box model ?? ou je ne sais plus faire de css...




Bah oui :)

les marges internes sont incluses dans le calcul de la boîte

"On obtient la largeur de la boîte en additionnant les marges, bordures
et espacements gauches et droites avec le largeur du contenu."

Pascal

--
Pascal Chevrel
FAQ Mozilla Suite/Netscape en français : http://www.chevrel.org/fr/faq/
Carnet web Mozilla : http://www.chevrel.org/fr/carnet/