Font-size et décalage de block

**Alkhan** · 07/07/2015, 16h59

Bonjour,
Il y a une chose que je n'arrive pas a comprendre et surtout a résoudre !
Un exemple étant plus parlant voila ce a quoi cela devrait ressembler :
Nom : Capture du 2015-07-07 16:42:51.png
Affichages : 102
Taille : 2,4 Ko

Nom : Capture du 2015-07-07 16:42:51.png
Affichages : 102
Taille : 2,4 Ko

Mon problème est que le texte du cadre "A" doit être plus gros, après modification voila ce qui ce passe
Nom : Capture du 2015-07-07 16:41:37.png
Affichages : 103
Taille : 3,5 Ko

Nom : Capture du 2015-07-07 16:41:37.png
Affichages : 103
Taille : 3,5 Ko

Pour le coté texhnique voila ce que j'ai :

Le HTML

Code :

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

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <title>Un test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
  </head>
  <body>
    <div class='tbase'><div class="tbaseContent tdata">A</div><div class="tbaseContent tpbar">B</div></div>
  </body>
</html>

Le CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.tbase {
  border: 1px solid grey;
  width: 60vw;
  height: 40vh;
}
 
.tbaseContent {
  text-align: center;
  height: 100%;
  display: inline-block;
}
 
.tdata {
  border: 1px solid blue;
  width: 69.5%;
  font-size: 3em;
}
 
.tpbar {
  border: 1px solid mediumseagreen;
  width: 30%;
}

Je souhaiterais donc dans un 1er temps, avoir une explication afin de comprendre pourquoi l'augmentation de la taille de la font provoque ce décalage !
Et dans un second temps, connaitre le moyen de fixé ce problème !

Merci d'avance

Invité · 07/07/2015, 21h24

Bonjour,
le décalage vient du vertical-align, qui par défaut est baseline :

2 solutions :

Code :

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

1
2
3
4
.tbaseContent {
  display: inline-block;
  vertical-align:middle;
}

ou

Code :

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

1
2
3
4
.tbaseContent {
  display: block;
  float:left;
}

**Alkhan** · 08/07/2015, 10h09

Merci de ton aide

j'ai finalement opté pour la deuxième sollution !

Font-size et décalage de block

CSS

Discussions similaires

Partager

Partager