Discussion :

[laurentSc]

Bonsoir,
je poste ici car même s'il s'agit d'une page Wordpress, je suis convaincu qu'il s'agit d'un problème purement de CSS...D'ailleurs, je l'ai traité avec un codepen : https://codepen.io/laurentsch/pen/poZabNO

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
  <h1>Les nids : </h1>
 
  <div class="flex-container">
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nidmontbonnot-300x169.jpg"
           alt="Nid de guêpes à Montbonnot Saint Martin" class="width200" />
      <figcaption>Nid de guêpes à Montbonnot Saint Martin</figcaption>
    </figure>
 
 
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nidfrelonsstmarcellin-225x300.jpeg"
           alt="Frelons asiatiques à St Marcellin" class="width200" />
      <figcaption>Frelons asiatiques à St Marcellin</figcaption>
    </figure>
 
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nid-225x300.jpeg" alt="Nid d'abeilles" class="width200"
      />
      <figcaption>Nid d'abeilles</figcaption>
    </figure>
 
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.55.37-225x300.jpeg"
           alt="Nid de guêpes à Méaudre" class="width200" />
      <figcaption>Nid de guêpes à Méaudre</figcaption>
    </figure>
 
    <div class="espace">&nbsp;</div>
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.55.17-225x300.jpeg"
           alt="Nid de frelons européens à Chichiliane"
           class="width200"/>
      <figcaption> Nid de frelons européens à Chichiliane</figcaption>
    </figure>
 
 
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.54.43-256x300.jpeg"
           alt="Nid de guêpes à Corrençon en Vercors" class="width200"
      />
      <figcaption>Nid de guêpes à Corrençon en Vercors</figcaption>
    </figure>
 
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.52.52-300x283.jpeg"
           alt="Nid de frelons asiatiques à st Jean en Royans"
           class="width200"/>
      <figcaption>Nid de frelons asiatiques à st Jean en Royans</figcaption>
    </figure>
 
    <figure>
      <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.51.52-290x300.jpeg"
           alt="Nid de guêpes à Lans en Vercors" class="width200"/>
      <figcaption>Nid de guêpes à Lans en Vercors</figcaption>
    </figure>
 
<div>
 
  <h1>Les insectes :</h1>
        <figure>
        <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/les-insectes-qui-piquent.jpg"
             alt="Les insectes qui piquent" class="width200"/>
        <figcaption> Les insectes qui piquent</figcaption>
      </figure>
 
 
      <figure>
        <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/tous-les-insectes.jpg"
             alt="Tous les insectes" class="width200"/>
        <figcaption>Tous les insectes</figcaption>
      </figure>
  </div>
    </div>

CSS :

Code css :

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
.flex-container {
margin:0 auto;
display:flex;
flex-flow:row wrap;
justify-content:space-around;}
@media (min-width: 1500px) {
  .flex-container {
width:1500px;
}
  @media (max-width: 1500px) {
  .flex-container {
width:800px;
}
 
 .espace{
   height:50px;
}    
 
.width200{
  width:200px;
}

Comme vous pouvez le constater, les 2 premières lignes ne sont pas espacées du tout malgré ma tentative d'insérer une div de hauteur de 50 pixels. Comment faire, SVP ?

[NoSmoking]

Bonjour,
as tu essayé avec la propriété gap:<row-gap> <column-gap> ?

[laurentSc]

Excellent : row-gap fait le job