Retour chariot et espaces supplémentaires

**mrqs2crbs** · 24/02/2015, 16h24

salut à tous,

je suis confronté à un probléme que je n'arrive pas à résoudre

dans le code suivant, il y a 2 blocks de <div class="popup_table__row complements">,
qui affichent exactement la même chose : une ligne de 3 <input>
dans le premier block j'arrange mon code avec des retours chariots,
et dans le second block j'écrits tout sur une ligne.

cette seule différence me créer un décalage dans l'affichage:

Code html :

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
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel='stylesheet' id='twentytwelve-style-css'  href='style.css' type='text/css'/>
    </head>
    <body>
        <div class="popup_table__form popup_table__form--foot">
            <div class="ligne_complements">
                <div class="popup_table__row complements">
                    <div class="popup_table__coll"><input class="techno_1" type="text" placeholder=""/></div>
                    <div class="popup_table__coll"><input class="coord_1" type="text" placeholder=""/></div>
                    <div class="popup_table__coll popup_table__coll--last"><input class="info_1" type="text" placeholder=""/></div>
                </div>
                <div class="popup_table__row complements">
                    <div class="popup_table__coll"><input class="techno_1" type="text" placeholder=""/></div><div class="popup_table__coll"><input class="coord_1" type="text" placeholder=""/></div><div class="popup_table__coll popup_table__coll--last"><input class="info_1" type="text" placeholder=""/></div>
                </div>
            </div>
        </div>
    </body>
</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
34
.popup_table__form {
    background: none repeat scroll 0 0 #efefef;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 28px;
    padding: 8px 10px 19px 30px;
}
 
.popup_table__row {
    margin: 0 0 10px;
}
 
.popup_table__form--foot .popup_table__coll {
    width: 200px;
}
 
.popup_table__coll {
    display: inline-block;
    margin: 0 8px 0 0;
    width: 100px;
}
 
input, textarea {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #6f6f6f;
    box-sizing: border-box;
    color: #6f6f6f;
    font-family: "Ruda",Verdana,Tahoma,Arial,sans-serif;
    font-size: 11px;
    height: 38px;
    outline: medium none;
    padding: 0 13px;
    width: 100%;
}

Nom : pb_retour_chariot.png
Affichages : 146
Taille : 15,9 Ko

si quelqu'un peut m'éclairer, parce que là je séche.

cordialement

**Bovino** · 24/02/2015, 16h31

C'est le mécanisme qui permet notamment que

Code html :

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

1
2
3
<div>Hello
World
!</div>

puisse afficher

Hello World !

et non

HelloWorld!

**mrqs2crbs** · 24/02/2015, 16h40

pour du texte ok,
mon probléme n'est pas là, si tu affiches :

Code html :

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

1
2
3
4
5
<div>
        <div>Hello</div>
        <div>World</div>
        <div>!</div>
</div>

et

Code html :

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

<div><div>Hello</div><div>World</div><div>!</div></div>

il n'y aura aucune différence.

**Bovino** · 24/02/2015, 16h48

Ben évidemment puisque les balises div sont de type block !

Mais ça n'empêche en rien que pour HTML, un retour chariot est équivalent à un espace.
Change les div internes en span et tu comprendras

http://jsfiddle.net/99pwLvzv/

**mrqs2crbs** · 24/02/2015, 17h34

incroyable,

j'étais passé à côté de ça tout ce temps là,
c'est donc parce que mes <div> sont {display: inline-block;}
qu'elles interprètent le R.C. comme un espace.

merci, d'avoir pris le temps d'une explication

**Bovino** · 24/02/2015, 17h41

A noter aussi que tu peux avoir autant de retours chariots que tu veux, autant d'indentation aussi, ça ne sera considéré que comme un seul espace malgré tout.

Retour chariot et espaces supplémentaires

CSS

Vue hybride

Discussions similaires

Partager

Partager