28172 sujets

CSS et mise en forme, CSS3

Question de compréhenssion

Bonjour,

Je pratique le CSS depuis pas mal de temps maintenant mais des questions basiques me laisse des fois sur le doute... Lorsque je créé un body de 960px de largeur, si à l'intérieur je mets un fieldset avec un border de 1px, est-ce que mon body aura une largeur augmenté de 2px ?

Est-ce que les contours augmentes la largeur ?
Modifié par tonymx15 (23 Sep 2011 - 12:46)
Idem :

Mais attention sur certain plan car certaines instructions peuvent augmenter la largeur d'un élément (je ne fais pas mention de body ici). Comme le padding sur un div par exemple. Parfois il est préférable qu'un objet à l'intérieur du div soit margin. Il est bien quelque fois (et tout dépend du contexte), que les objets enfants soient autonome en instruction CSS.

Imagine que sur body tu as l'instruction - width:100% - bordure ou pas, ta largeur sera de 100%. C'est l'instruction que l'on donne donc . . . les résultats. Smiley smile

..
tonymx15 a écrit :
Lorsque je créé un body de 960px de largeur, si à l'intérieur je mets un fieldset avec un border de 1px, est-ce que mon body aura une largeur augmenté de 2px ?

Non.

tonymx15 a écrit :
Est-ce que les contours augmentes la largeur ?

Ça dépend.

1. Si tu as un bloc en box-sizing:content-box en width:auto, il prendra toute la largeur disponible dans son parent, et l'ajout de bordures ou de padding n'augmenteront pas sa largeur (à la place, ça diminuera la largeur de la zone de contenu).

2. Si tu as un bloc en box-sizing:content-box avec une largeur déclarée de 500px, et que tu lui rajoutes une bordure ou du padding, sa largeur totale sera plus grande que la largeur déclarée (elle comprendra la largeur déclarée pour le contenu, plus le padding et les bordures).

3. Si tu as un bloc en box-sizing:border-box avec une largeur déclarée de 500px, et que tu lui rajoutes une bordure ou du padding, sa largeur totale restera à 500px.

Par défaut, un élément dont le mode de rendu est display:block sera en box-sizing:content-box; width:auto; (premier cas de figure). Si tu lui rajoutes une largeur fixe, on se retrouve dans le deuxième cas de figure. Enfin, si tu bascules en box-sizing:border-box, tu es dans le troisième cas de figure.

En général on reste le plus souvent en 1: il est rarement utile de définir des largeurs fixes ou en pourcentages pour des éléments, et les débutants ont tendance à en définir plus que strictement nécessaire.
Merci pour toutes ces réponses Smiley cligne

Je suis maintenant plus éclaircis sur le domaine Smiley smile

Donc si j'ai bien compris :


<body>
<div class="container">
<fieldset>
<legend>Test</legend>
Test largeur
</fieldset>
</div>
</body>




body{width: 960px}
div.container{width: auto}
filedset{border: 1px solid gray}


Dans cet exemple le body reste à 960px ?
Modifié par tonymx15 (23 Sep 2011 - 12:42)
Sujet clos
Aller à