Propriété implicite selon le contenu ?

**mathspountz** · 19/06/2015, 21h41

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 :

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
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 css :

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

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.

**mathspountz** · 20/06/2015, 11h11

Pour info voici le rendu (testé sur chrome et firefox)

Nom : Sans titre.png
Affichages : 83
Taille : 21,0 Ko

**NoSmoking** · 22/06/2015, 21h09

Bonjour,
tu ne devrais pas utiliser un display:inline-block mais plutôt un float:left

Code css :

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

1
2
3
4
5
6
7
8
.cont_infos_user {
/*    display:inline-block; /* OUT */
    float:right;
    width:20%;
    height:150px;
    background-color:black;
    color:white;
}

pour info il existe aussi la propriété border qui te permet de faire des bordures épaisses sur de éléments sans pour autant imbriquer plusieurs éléments.

Propriété implicite selon le contenu ?

HTML

Vue hybride

Discussions similaires

Partager

Partager