28172 sujets

CSS et mise en forme, CSS3

[Résolu] Margin ou padding se basent sur la taille de police dans un b

Bonjour Smiley biggrin
Mon body fait 1000px
J'ai un block <header> avec à l'intérieur un <h1> et un <p>
J'ai défini dans une feuille de style le font-size à 100% (16px par défault).
J'ai donné un font-size de 3.3em sur mon <h1> et un font-size de 0.875em sur mon <p>
Le <h1> et le <p> sont centrés, le <h1> a une marge haute a peu près de 1em dans mon header et le <p> une marge de 0.875em. (Sur la maquette)

Pour mettre ça en forme, j'ai mis :
- un padding-top à mon header de 1em (mon <h1> se présente bien comme je le veux)
- un padding-bottom à mon header de 0.875em
Et là ça ne va plus, l'espacement entre le <p> et le bas du header n'est pas le bon, j'ai du mettre un padding-bottom de 1.5em à mon header pour que le résultat soit satisfaisant alors que cet espacement est plus petit que celui entre le titre et le header.

Je constate donc, si vous me le confirmez, que le padding-top se base sur le font-size du <h1> et que le padding-bottom se base dolnc sur le font-size du <p>

<header class="header">
        <h1 class="main-title">officialwork</h1>
        <p class="design-by">Template Design by FCT</p>
    </header>




.header
{
    text-align: center;
    border: 1px solid black;
    padding-top: 1em;
    padding-bottom: 1.5em;
}

.main-title
    {
        font-size: 3.3em;
    }
p
{
    font-size: 0.875em;
}

Etrange non ???
Modifié par LeFredd (18 Feb 2014 - 19:25)
non ^^
Le padding du header se base bien sur le font-size par défaut du navigateur.

Tu oublies 2 paramètres importants:

- les marges attribuées par défaut au h1 et au p
- le line-height dépendant du font-size

Pour le visualiser, retire le margin-top de ton h1, le margin-bottom de ton p, attribue une couleur de fond à chacun d'eux pour visualiser le line-height. Et tu verras que ton padding-top et padding-bottom sont bien égaux avec une valeur logique en regard du font-size sur header.

.header
{
    text-align: center;
    border: 1px solid black;
    padding: 1.5em 0;
}

.main-title
    {
        font-size: 3.3em;
		margin-top:0;
		background:red;
    }
p
{
    font-size: 0.875em;
	margin-bottom:0;
	background:green;
}

Modifié par Candygirl (18 Feb 2014 - 20:30)
Merci pour ta réponse, mais j'ai oublié de préciser que j'utilise le reset css de Meyer et aussi un box-sizing: border-box sur tous les éléments
Modifié par LeFredd (18 Feb 2014 - 21:07)
As-tu attribué une couleur de fond à chacun de tes éléments comme je te l'ai suggéré ?

Si ton reset css supprime bien les marges par défaut cela te permettra de visualiser le deuxième point que je citais: l'impacte du line-height et l'inscription des caractères sur cette hauteur (un espace au-dessus qui peut devenir assez conséquent si le font-size est important, par contre, un espace quasi inexistant sous les jambages des lettres).

Tu constateras donc de toi-même la raison de l'espacement plus grand en haut qu'en bas qui n'a rien à voir avec une interprétation différente des padding-top et bottom.
Oui j'ai mis une couleur de fond, je comprend ce que tu veux dire mais le comportement reste étrange quand même,
Par exemple si j'applique un margin-bottom sur le <h1> pour l'espacer du <p> je suis obligé de mettre une toute petite valeur, dans mon exemple 0.4em (l'espace est déjà pas mal) Par contre si je fais la même chose sur le <p>, l'espace avec la même valeur de 0.4em deviens complètement ridicule.

Comme je le disais plus haut, c'est comme si le navigateur se basait sur le font-size de chaque élément dans mon block <header>, comme si il disait "Je prend comme référence la valeur 3.3em du <h1> et je me sers de cette valeur pour calculer une marge ou un padding à l'élément, au lieu de prendre 16px comme base d' 1em, je prend comme base 3.3em, et pareil pour l'élément <p> qui vaut 0.875em"

Je joins tous mes fichiers :

Dans le reset.css j'ai juste rajouté le box sizing au début du fichier comme ceci :

/*  http://meyerweb.com/eric/tools/css/reset/  
   v2.0 | 20110126
   License: none (public domain)
*/

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OfficialWork</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/modules.css" />
    <link rel="stylesheet" href="css/states.css" />
    <link rel="stylesheet" href="css/theme.css" />
</head>

<body>
    <header class="header">
        <h1 class="main-title">officialwork</h1>
        <p class="design-by">Template Design by FCT</p>
    </header>
    
    <nav class="nav">
        <ul>
            <li class="is-active"><a href="#">HOME</a></li><li><a href="#">BLOG</a></li><li><a href="#">PHOTOS</a></li><li><a href="#">ABOUT</a></li><li><a href="#">LINKS</a></li><li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
</body>
</html>


base.css :

body
{
    width       : 1000px;
    margin      : 0 auto;
    font-size   : 100%;
}

h1
{
    font-size: 3.3em;
}

p
{
    font-size: 0.875em;
}

modules.css

/************* header ****************/
.header
{
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1.5em; 
}

    .main-title
    {
        margin-bottom: 0.4em;
    }
/*********** navigation **************/
.nav
{
    padding-left: 12.5%;
    padding-right: 12.5%;
    margin-bottom: 1.5em;
}
    
    .nav li
    {
       display: inline-block;
       width: 16.66666666666666666667%;
    }
    
        .nav li a
        {
            display: inline-block;
            width: 100%;
            text-align: center;
            height: 3.438em;
            line-height: 3.5em;
        }


states.css

/****** general *******/
.is-active
{
    background: #05457d;
}
a:hover
{
    background: #05457d;
}

theme.css
[code]
/******* general ******/
body
{
    font-family: Tahoma, Geneva, Kalimati, sans-serif;
    background-color    : white;
    background-image    : url(../img/main-bg.jpg);
}

h1, h2, h3, p, a
{
    font-weight: bold;
}

a
{
    text-decoration: none;
    color: white;
}
/****** header ******/
.main-title
{
    color: #054175;
}

/***** navigation *****/
.nav
{
    background: #064c8a;
    border-radius: 1em 0 1em 0;
}

[/code]
Oui, ce que tu as constaté là est tout à fait correct (mais c'est différent de ce que tu énonçais dans ton premier message Smiley cligne ). Si tu mets un padding en em à ton p il sera moins important que si tu attribues le même padding à ton h1 puisque l'unité em est relative au font-size de l'élément en question comme énoncé au point 4.3 des recommandations css 2.1:
w3c a écrit :
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

traduction:
yoyo design a écrit :
L'unité 'em' correspond à la valeur calculée pour la propriété 'font-size' d'un élément donné. Sauf quand cette unité est spécifiée dans la propriété 'font-size' elle-même, auquel cas, elle se réfère à la taille de la police de l'élément parent. On peut l'utiliser pour des mesures de quantités verticales ou horizontales. (En typographie, on l'appelle aussi carré typographique ou corps).

Modifié par Candygirl (19 Feb 2014 - 09:01)
Ok merci c'est bien ce qu'il me semblait Smiley cligne

Parfois je ne trouve pas très logique le comportement du css. Mais bon faut faire avec.
Sujet clos
Aller à