Liste des margin/padding par défauts [résolu]

Bonjour,

J'aimerais savoir si il existe une liste des "margin" et "padding" par défauts pour les différents navigateurs et si oui où est-ce que je peux la trouver. Actuellement, je met, par prudence, des valeurs pour margin et padding pour toutes les balises qui se trouvent dans mon html, mais je ne sais pas si c'est justifié...

Merci d'avance.
Modifié par mathmax (11 Sep 2005 - 12:26)

Bonjour mathmax.

Je ne sais pas si une telle liste existe. Cependant, je pense inutile d'écraser les valeurs par défaut si celles-ci conviennent. Si tu souhaites redéfinir l'ensemble des valeurs par défaut, autant leur donner une valeur nulle au départ en utilisant le sélecteur universel comme suit :

* {padding: 0; margin: 0;}

Ensuite, tu peux redéfinir globalement comme suit :

h1, h2, h3, h4, h5, h6, p, ol, ul, address, pre, blockquote {
   margin: 1em 0;
}

Ça évite des problèmes avec entre autre l'indentation des listes et la fusion des marges, quoique je trouve que c'est un peu brutal comme solution...

Bonsoir.
Pour palier et uniformiser les différentes interprétations des navigateurs :

* {margin: 0;padding: 0;border: 0;list-style-type: none;text-decoration: none;
	font-family: arial,"lucida grande", verdana, helvetica, geneva, sans-serif; }
	/* =============== =============== =============== */
html, body {
	background: #eee;
	font-size: 1em;
	color: #000;
}
h1 {
	font-size: 2.2em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.8em;
}
h4 {
	font-size: 1.6em;
}
h5 {
	font-size: 1.4em;
}
h6 {
	font-size: 1.2em;
}
p {
	font-size: 1em;
	text-align: right;
}
a {
	color: #333;
}
a:hover {
	color: #006;
	border-bottom: 1px dashed #f90;
}
a:active {
	color: #600;
}
/*a:visited {
	color: #666;
}*/
pre {
	font-family: courier, monospace;
	font-size: 1.1em;
	color: #330;
}
hr, .hr1, .hr2 {
	background: #f90;
	color: #f90;
	height: 1px;
}
hr {
	margin: 7px 0;}
	.hr1 {margin: 7px 0 0;}
	.hr2 {margin: -7px 0 7px;}
b {
	font-size: 1.em;
	font-weight: 900;}
	.b2 {font-size: 1.1em;}
i { 
font-style: italic;
}
/* espacements */
h1, h2, h3, h4, h5, h6, p, pre {
	margin-bottom: 7px;
}
/* indentations */
.ind0 { margin-left: 0;}
.ind5 { margin-left: 5px;}
.ind10 { margin-left: 10px;}
.ind20 { margin-left: 20px;}
.ind30 { margin-left: 30px;}
.ind40 { margin-left: 40px;}
.ind50 { margin-left: 50px;}

Il va de soit que ce n'est qu'une interprétation de feuille de style "par défaut" comme une autre. C'est celle que j'utilise ( les indentations pour les listes sont simples et je n'ai pas de problème avec le reste ) Le principe est de définir les balises html qu'on utilise "hors-style", non assujetties à une règle prévue dans notre présentation. Disons que cet exemple donne une idée du "binz".

La fusion des marges concerne les cellules de tableaux, y compris les anotations css "display: table"
Modifié par Aureance (07 Sep 2005 - 01:19)

Merci. Cette feuille de style est super. J'aime bien le coup de définir des classes pour les indentations.
Par contre, je n'ais toujours pas trop compris ce qu'était la fusion de cellule.

Tu trouveras iciborder-collapse un début de réponse au fusionnement des cellules.

Je crois que Stephan parlait bien de la fusion des marges et non des bordures.

Oui, c'est vrai djfeat, Stefan parlait de fusion des marges et voici que j'introduis la confusion avec les fusions de bordures.

En tout cas, je vois qu'on fusionne au même râtelier (yoyodesign.org)

djfeat a écrit :

Je crois que Stephan parlait bien de la fusion des marges et non des bordures.

En effet.

En gros, si on a deux blocs dans le flux normal dont un a une marge inférieure de 20px et l'autre a une marge supérieure de 30px, les marges fusionnent. La marge résultante sera la plus grande des deux, soit 30px, et non la somme des deux marges qui donnerait 50px.



Les marges horizontales ne fusionnent jamais.
Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas.
Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas.

La fusion des marges s'applique aussi aux blocs imbriqués.

Soit l'exemple suivant :

<style type="text/css">
#conteneur {
	background-color: blue;
	width: 200px;
	height: 200px;
	margin-top: 20px;
}
#bloc {
	background-color: yellow;
	width: 100px;
	height: 100px;
	margin-top: 100px;
}
</style>

<body>
	<div id="conteneur">
		<div id="bloc">bloc</div>
	</div>
</body>

Ici encore, les marges fusionnent, prenant la valeur la plus grande (100px). Même si cette marge appartient au bloc imbriqué <div id="bloc">, elle s'applique au bloc conteneur <div id="conteneur">.

Le résultat (attendu) dans Firefox :


Le résultat dans Internet Explorer :


Connaître cette réalité permet de résoudre bon nombre de problèmes de positionnement.
Modifié par Stephan (07 Sep 2005 - 06:30)

Bonjour,

Pour connaître les différents styles par défaut des navigateurs :
- prendre comme référence la feuille de style indicative proposée dans la norme CSS2.1
- comparer, pour Firefox, avec les CSS de l'UA, dans le répertoire res
- comparer, pour les autres navigateurs, avec le rendu par défaut.

les styles généralement problématiques car différents sont :
- l'espace des puces de listes (padding ou margin des ul et ol)
- marge ou padding du body
- espace avant ou après les éléments form
Modifié par Laurent Denis (07 Sep 2005 - 09:34)

Merci pour ces infos. Je sais pas pourquoi j'ai parlé de fusion de cellule. Je pensais évidement à la fusion des marges.

Désolé d'avoir mis résolu un peu trop tôt mais à présent je me pose la question suivante: Comment faire dans l'exemple de Stephan pour avoir avec Firefox le résultat qu'affiche IE. En d'autre termes, comment faire pour que la margin-top du "bloc" soit prise par rapport au bord supérieur du conteneur. On pourrait évidement définir un padding pour le bloc conteneur, mais je sais que c'est à éviter avec IE5. Doit-on forcément oublier les marges et faire du positionement absolu?

merci pour ces précisions.