Largeur d'un élément

**byrong** · 14/01/2014, 16h58

Bonjour

J'ai 4 élément avec un "width: 25%;". Entre ces élément j'aimerais mettre un espace entre chaque élément.

Comment puis je faire pour que mon 25% comprenne l'espace afin que les boites ne sorte pas du conteneur?

Merci

**NoSmoking** · 14/01/2014, 19h01

Bonjour,
regarde du coté de box-sizing: border-box;, compatibilité pas encore entièrement garantie sans préfixe propriétaire.

**Mell** · 15/01/2014, 15h43

Sachant que tu as 4 bloc de 25% ça veut dire que cela prend 100% de l'espace de ton conteneur.
Pour pouvoir mettre des espaces entre ces blocs, il faut que tu réduises la taille de tes blocs et que tu leurs mettent un margin ou un padding au choix suivant le résultat que tu veux.

**NoSmoking** · 16/01/2014, 22h29

à mon avis ce n'est pas le besoin, mais qui sait...

Comment puis je faire pour que mon 25% comprenne l'espace

**Mell** · 17/01/2014, 16h56

Bah c'est pas clair alors, avec du code et un exemple, ce serait peut être plus simple... A l'aide d'un jsfiddle par exemple.

**Muchos** · 17/01/2014, 19h48

Pas besoin de JSFiddle >< On peut mettre du code sur DVP (c'est magique ®) !
Donc,

Soit byrong utilise la solution de NoSmoking (.avecBoxSizing);
Soit il réduit la largeur de ses boîtes (.sansBoxSizing).

Ex :

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
 <meta charset="UTF-8" />
 <title>Border-box</title>
 <style type="text/css">
div {
 border: 1ex solid white;
 height: 4em;
}
.avecBoxSizing {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
  /* taille = width/height + padding + border */
 float: left;
 width: 25%;
 background: green;
}
 
.sansBoxSizing {
 display: inline-block;
 width: 20%;
  /* par exemple */
 background: red;
}
.sansBoxSizing-content {
 text-align: center;
}
 </style>
</head>
<body>
<section>
 <div class="avecBoxSizing"></div>
 <div class="avecBoxSizing"></div>
 <div class="avecBoxSizing"></div>
 <div class="avecBoxSizing"></div>
</section>
<section class="sansBoxSizing-content">
 <div class="sansBoxSizing"></div>
 <div class="sansBoxSizing"></div>
 <div class="sansBoxSizing"></div>
 <div class="sansBoxSizing"></div>
</section>
</body>
</html>

Largeur d'un élément

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager