Discussion :

[noftal]

bonjour,
Sans doute un cas classique pour beaucoup, mais comme je suis novice, je patauge un peu.
J'ai un bloc "container" dans lequel j'ai 2 blocs "content1" et "content2"
ça commence comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#container{
max-width: 980px;
width: 100%;
}
#content1{
float: left;
width: 75%;
}
#content1{
float: right;
width: 25%;
}

En clair content1 et content2 sont côte à côte. Le premier fait 75% de la largeur du container et l'autre fait 25%
Maintenant, je voudrais rajouter des marges à l'intérieur de content1 et content2
Alors, entre margin et padding, j'ai encore du mal donc j'essaye l'un puis l'autre.
Le pb c'est que la largeur utile du content1 et 2 est calculée avant l'application des marges.
Comme les marges viennent se rajouter, la largeur cumulée de content1 et 2 avec marges excède la largeur du container donc content2 est renvoyé en-dessous de content1 (à droite quand même).

Une solution consiste bien sûr à rattraper le truc en réduisant les % respectifs des width de content 1 et 2. Mais c'est pas top car, cela revient à dire que les propriétés width et content1 et 2 et les paddings (ou margin) que je leur assigne ne sont pas indépendants. Si je bouge l'une, je dois modifier l'autre.
Y a-t-il un moyen de garder width = 75% et 25% et faire en sorte que c'est la partie utile qui voit sa largeur réduite à mesure que j'augmente les marges ?

Merci par avance.

[NoSmoking]

Bonjour,
ton salut passe par box-sizing: border-box à appliquer sur tes éléments content1 et 2.

Cette propriété inclus dans le calcul de la largeur et de la hauteur les marges internes (padding) et la bordure (border) de l'élément diminuant son espace intérieur.

[noftal]

Merci, ça marche !
Enfin, juste pour l'information d'autres lecteurs de ce topic, ça ne marche qu'avec padding, pas avec margin.
Mais dans mon cas, les 2 étant interchangeables, cela résout parfaitement mon problème.
Merci encore !

[NoSmoking]

...ça ne marche qu'avec padding, pas avec margin.

tout comme il me semblait l'avoir indiqué clairement, les marges extérieures n'appartenant pas à l'élément