Propriété implicite selon le contenu ?
Bonsoir,
Je débute en html/css et je prépare donc un test très simple pour comprendre le comportement des différentes propriétés css.
Voici le code html test :
Je répète deux fois le même code avec un changement :
- Un header sans texte dans la div b_connexion.
- Un header avec un texte dans la div b_connexion qui semble rétablir la situation, mais je ne comprends pas pourquoi.
Quelqu'un aurait-il une explication quant à ce changement de comportement ?
Le code html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title><?php $htmlTitle ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='colonne_centrale'>
<header>
<div class="home">
<div class="logo">logo</div>
</div>
<div class="cont_infos_user">
<div class="b_connexion">
a
</div>
</div>
</header>
<header>
<div class="home">
<div class="logo">logo</div>
</div>
<div class="cont_infos_user">
<div class="b_connexion">
</div>
</div>
</header>
</div>
</body>
</html> |
Le code css :
Code:
1
2
3
4
5
6
7
8
9
10
| html{height: 100%;}
body {margin: 0px 0px 0px 0px; height: 100%;}
.colonne_centrale{margin: auto; width: 75%; height: 100%; min-width: 800px; max-width: 1000px;}
header{font-size : 0;}
header .logo{display: inline-block; width: 20%; height: 150px; background-color: black; color: white; opacity: 0.5;}
header .home{display: inline-block; width: 80%;height: 150px; background-color: green;}
header .cont_infos_user{display: inline-block; width: 20%; height: 150px; background-color: black; color: white;}
header .b_connexion{background-color: orange; width: 91%; height: 80%; position: relative; top: 8%; left: 5%; text-align: center;} |
Je signale que le propriété : header{font-size : 0;} est la pour empêcher le comportement d'espaces indésirables qui m'avaient déjà bien surpris... Je ne comprends pas pourquoi le comportement par défaut du navigateur est d'ajouter 4 pixels lors des sauts de ligne dans le code, alors que ces derniers n'ont normalement pas d'autres fonctions que de rendre le code plus lisible (par un humain) mais c'est un autre débat.
Merci d'avance pour vos réponses.
