Bonjour,
Fripon a écrit :
J'ai mis des padding avec des % , en apprenant que les padding et width s'ajoute je me suis retrouvé encore plus perdu ! un padding en % serait % de quoi ? et on ajouterait les % de width et padding voire border aussi ? je suis complètement perdu...
Pour un padding, c'est en % de la largeur du conteneur qui entoure l'élément auquel tu appliques le padding.
Exemple :
http://jsfiddle.net/3185rgej/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
#a {width:200px;background:#fc9;border:10px solid #f00;}
#b {width:70%;padding:10%;background:#9cf;border:10px solid #000;}
</style>
</head>
<body>
<h1>Percent test</h1>
<div id="a">
<div id="b">
Blabla
</div>
</div>
</body>
</html>
Dans cet exemple, l'élément #b a un padding de 10%, ce qui fait 20px, le conteneur de #b étant #a qui a une largeur de 200px.
Par défaut, la largeur d'un élément n'inclut pas ses paddings et ses borders (on pourrait faire en sorte qu'elle les inclut, mais on ne va pas en parler ici pour ne pas trop embrouiller les choses). La largeur de l'élément #b est de 70%, c'est à dire ici de 140px (70% de 200px qui est la largeur de #a qui contient #b). Les paddings et les borders viennent se rajouter à l'extérieur de #b. Au total, on obtient pour #b 70% (largeur) + 10% (padding à gauche) + 10% (padding à droite) + 2x10px (borders), soit une largeur totale de 140+20+20+20=200px, soit ici exactement la largeur de #a.
Note que les paddings en haut et en bas sont eux aussi en pourcentage de la largeur du conteneur de l'élément (et non pas en pourcentage de la hauteur du conteneur).
Note que de même que pour #b, les paddings et borders de #a se rajoutent à l'extérieur. C'est pour ça que #b ne recouvre pas les borders de #a sur l'exemple que j'ai donné. Les borders de #a ne sont pas compris dans sa largeur de 200px. Ils sont en plus. La largeur totale de #a est donc de 200px + 2x10px (borders) soit 220px (#a n'a pas de padding dans l'exemple, c'est pour ça qu'on n'a pas à en tenir compte).
Amicalement,
Modifié par parsimonhi (18 Jan 2016 - 12:06)
