Cohérence du saut de ligne avec CSS

**Gilles_75** · 23/06/2020, 15h43

Bonjour

J'ai un problème CSS pour réaliser une meilleure mise en page de la page suivante

https://guideyourtrip.com/blog-voyag.../visite-naples

J'aimerais avoir la même hauteur de saut de ligne entre chaque <article>et qu'a l'intérieur de ces <article> le saut de ligne soit juste un retour chariot.

Voici le code HTML

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<section>
<article>
<header>
<h2 class="category_h2_sans_ident"><strong>Les incontournables à voir à Naples</strong></h2>
</header>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Piazza del Plebiscito</strong></h3>
</header>
<p class="category_description">Place de Naples la plus importante. Située au cœur de la ville.</p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Castel dell’Ovo</strong></h3>
</header>
<p class="category_description">Au sud de Naples à proximité des quartiers de Santa Lucia (centre ville)
et du quartier chic de Chia.</p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Artére Spaccanapoli</strong></h3>
</header>
<p class="category_description">Centre historique de Naples.
<a href="https://www.naples-fantastique.com/visiter-naples-les-iles/spaccanapoli-artere-de-naples-antique" target="_blank" rel="noopener noreferrer"><strong>Votre excursion  </strong></a></p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Monastère San Martino</strong></h3>
</header>
<p class="category_adresse">Largo S. Martino, 5, 80129 Napoli</p>
<p class="category_acces">Funiculaire : Dans le centre monumental, station Toledo, à la hauteur de la Galerie Umberto,
l’autre dans le centre historique, station Montesanto </p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Château Sant’Elmo</strong></h3>
</header>
<p class="category_adresse">Via Tito Angelini, 22, 80129 Napoli</p>
<p class="category_presentation">Château médiéval et musée, situé sur la colline du Vomero.</p>
<p class="category_acces">Funiculaire : Chiaia, arrêt Cimarosa et Montesanto, arrêt Morghen  </p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Théâtre San Carlo</strong></h3>
</header>
<p class="category_adresse">Via San Carlo, 98, 80132 Napoli</p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>La galéria Umberto I</strong></h3>
</header>
<p class="category_adresse">Via San Carlo, 15, 80132 Napoli</p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>le Monte Vomero</strong></h3>
</header>
<p class="category_description">Plus belles vues sur Naples et son golfe.
<a href="http://www.bellanapoli.fr/visiter/visites-guidees/visites-par-quartier/vomero" target="_blank" rel="noopener noreferrer"><strong>Aperçu du quartier du Vomero  </strong></a></p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Parco Virgiliano</strong></h3>
</header>
<p class="category_adresse">Viale Virgilio, 80123 Napoli</p>
<p class="category_description">Un parc en terrasse, une vue splendide.</p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Vignoble Astroni</strong></h3>
</header>
<p class="category_description">7 km du centre historique de Naples.</p>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Pompéi et Herculanum</strong></h3>
</header>
<ul class="category_acces">
<li>Train : Empruntez la ligne Naples-Salerne et descendez à la station Pompei.</li>
</ul>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Vésuve </strong></h3>
</header>
<ul class="category_acces">
<li>Bus : De Naples par le bus (compagnie EAV) à la station Quota Mille, à déjà 1000m d’altitude,
et là, ascension du Vésuve jusqu’au cratère (1200m).</li>
</ul>
</article>
 
<article>
<header>
<h3 class="category_h3"><strong>Visiter les îles aux alentours de Naples</strong></h3>
</header>
<p class="category_description">
– Capri
– Ischia
– Procida
<a href="https://www.mademoiselle-voyage.fr/europe-italie-naples-procida" target="_blank" rel="noopener noreferrer"><strong>Visite de Procida </strong></a></p>
</article>
<br />
<article>
<header>
<h3 class="category_h3"><strong>Positano et le Sentier des Dieux</strong></h3>
</header>
<p class="category_description">
– Capri
– Ischia
– Procida
<a href="http://www.amalficoastrekking.com/fr/randonnes-en-campanie-cote-amalfitaine-le-sentier-des-dieux.html" target="_blank" rel="noopener noreferrer"><strong>Trek d’Agerola jusqu’à Positano </strong></a></p>
</article>
 
</section>

Et voici le code 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
23
24
25
26
27
28
29
30
.category_h2_sans_ident {
    font-size:1.375rem ;
    line-height :1.250rem ;
    font-weight : 500 ;
}
 
.category_h3 {
    font-size:1.125rem ;
    line-height :1.3125rem ;
    font-weight : 500 ;
}
 
.category_adresse {
    font-size:1.125rem ;
    line-height :1.3125rem ;
    font-weight : 500 ;
}
 
.category_description {
    font-size:1.125rem ;
    line-height :1.3125rem ;
    font-weight : 500 ;
}
 
.category_acces {
    font-size:1rem ;
    line-height :1.3125rem ;
    font-weight : 500 ;
    white-space:normal;
}

Merci pour votre aide

**Dave Hiock** · 23/06/2020, 16h37

Surprenant cette construction !

Code HTML :

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

<h3><strong></strong></h3>

J'ai même l'impression qu'une "defintion list" aurait était plus avantageuse.

Concernant l'espacement entre ligne, il te suffit de mettre à zéro les padding et margin des tes éléments h3 et p, puis de mettre un

Code CSS :

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

1
2
3
article {
    margin-bottom: 1em;
}

sur les articles par exemple.

**Gilles_75** · 23/06/2020, 17h43

Merci effectivement ça fonctionne beaucoup mieux mais pourquoi sur certains bloc <article> le saut de ligne n'est pas identique ?

Exemple

https://guideyourtrip.com/blog-voyag.../visite-naples

Par exemple entre
Piazza del Plebiscito
et
Castel dell’Ovo
écart de saut de ligne Ok
mais entre
Monastère San Martino
et
Château Sant’Elmo
l'écart de saut de ligne est plus élevé

voici le code HTML

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
<article class="category_article">
<header>
<h3 class="category_h3"><strong>Château Sant’Elmo</strong></h3>
</header>
<p class="category_adresse">Via Tito Angelini, 22, 80129 Napoli</p>
<p class="category_description">Château médiéval et musée, situé sur la colline du Vomero.</p>
<ul class="category_acces">
<li class="category_acces">Funiculaire : Chiaia, arrêt Cimarosa et Montesanto, arrêt Morghen  </li>
</ul>
</article>
 
<article class="category_article">
<header>
<h3 class="category_h3"><strong>Théâtre San Carlo</strong></h3>
</header>
<p class="category_adresse">Via San Carlo, 98, 80132 Napoli</p>
</article>

Voici le code CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.category_acces {
    font-size:1rem ;
    line-height :1.3125rem ;
    font-weight : 500 ;
    white-space:normal;
    padding : 0;
    margin : 0;
}
 
.category_article {
    margin-bottom: 1em;
}

**Dave Hiock** · 24/06/2020, 19h05

ta règle

Code :

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

1
2
3
.et_pb_text ol, .et_pb_text ul {
    padding-bottom: 1em;
}

l'emporte sur ta règle

Code :

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

1
2
3
4
5
6
7
8
.category_acces {
    font-size: 1rem;
    line-height: 1.3125rem;
    font-weight: 500;
    white-space: normal;
    padding: 0;
    margin: 0;
}

Regarde ce qui se passe dans la console.