Fusionner deux marges verticales
Fusionner deux marges verticales - HTML/CSS - Programmation
Marsh Posté le 27-12-2004 à 10:19:22
C'est à cause des marges des paragraphes, non-nulles par défaut.
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 27-12-2004 à 10:20:13
si je me souvient bien retire le padding/margin du ul et li.
ensuite met ca http://www.w3schools.com/css/pr_li [...] sition.asp en inside.
Marsh Posté le 27-12-2004 à 10:32:11
| gm_superstar a écrit : C'est à cause des marges des paragraphes, non-nulles par défaut. |
En effet, lorsque je mets
p { |
dans les CSS, les écarts disparaissent.
Mais alors comment faire pour avoir des paragraphes qui s'écartent les uns des autres (pour plus de lisibilité) sans que cet écart n'agisse à l'éxtérieur du conteneur (le DIV en l'occurrence)?
Message édité par Cutter le 27-12-2004 à 10:37:40
---------------
last.fm
Marsh Posté le 27-12-2004 à 10:39:10
Essaye en donnant un padding aux DIV (par défaut la marge d'un paragraphe est de 1em je crois)
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 27-12-2004 à 10:48:21
| gm_superstar a écrit : Essaye en donnant un padding aux DIV (par défaut la marge d'un paragraphe est de 1em je crois) |
Tu as raison, ça supprime les écarts quelle que soit la valeur du padding (même avec 1px). Pourquoi? Si la valeur de la marge d'un paragraphe est de 1em, il serait plus logique que l'écart soit supprimé lorsque le padding du DIV et supérieur où égal à 1em (ou à 0.5em), non? 
P.S: d'ailleurs à quoi correspond une unité "em" svp?
---------------
last.fm
Marsh Posté le 27-12-2004 à 10:54:28
| Cutter a écrit : P.S: d'ailleurs à quoi correspond une unité "em" svp? |
http://www.publishtogether.com/pompeurs/CssUniteEm
Sujets relatifs:
- Fusionner des champs :)
- [vba]Ignorer marges d'impressions
- fusionner plusieurs tables mysql en une seule...(bis)
- fusionner plusieurs tables mysql en une seule...
- [Java] Fusionner des types "Enumeration"
- [CSS] Mac : Problèmes divers - PART II : IE Mac et les marges
- CSS - probleme de marges avec IE par rapport à FIREFOX
- ACCESS - Modif marges d'un état par VBA
- Marges négatives sous Netscape
- [LaTeX] Réduction des marges autour du texte sur A4
Marsh Posté le 27-12-2004 à 10:16:22
Hello!
Voici une page simple:
HTML:
<BODY>
<DIV class="header">
<P>En-tête
</DIV>
<DIV class="menu">
<P>Barre de menu
<UL>
<LI>Menu 1</LI>
<LI>Menu 2</LI>
<LI>Menu 3</LI>
<LI>Menu 4</LI>
<LI>Menu 5</LI>
</UL>
</DIV>
<DIV class="footer">
<P>Pied de page
</DIV>
<P>Paragraphe
</BODY>
CSS:
body {
background: orange;
font-family: sans-serif;
font-size: small;
}
li {
background: blue;
}
.header {
background: yellow;
height: 100px;
}
.menu {
background: green;
width: 150px;
}
.footer {
background: red;
}
Voici ce que j'ai lu dans les recommendations du W3C au sujet des CSS:
4.1.1 Mise en forme verticale
Pour les éléments de type bloc non-flottants, la largeur de la marge correspond à une distance minimum entre le contenu et le bord des boîtes qui l'entourent. Si aucune bordure, ni espacement, ni contenu ne séparent deux (ou plus) marges verticales adjacentes, alors elles fusionnent et la résultante est la plus grande de ces valeurs de marge. Dans la plupart des cas, cette fusion des marges verticales donne un meilleur aspect visuel, plus proche des attentes de l'auteur.
A priori, "header" devrait partager sa marge inférieure avec "menu" puisque je n'ai spécifié aucune bordure, ni marge, ni padding. Idem pour "menu" et "footer". Pourtant, même en forcant la valeur de "margin", de "padding" et de "border" à zéro, j'ai toujours un décalage entre les deux. C'est à s'arracher les cheveux.
J'aimerais comprendre pourquoi ce décalage apparaît, savoir ce qu'il représente (est-ce une marge?), et comment le supprimer le plus simplement possible.
Voilà ce que ça donne:
D'avance merci.
---------------
last.fm