Inline-block et fusion des marges

Salut,

Et enlever les margin-bottom de tes boutons du coup ? Certes ça ne sera pas une fusion mais il n'y aura plus de marge..

Merci laurent, effectivement, ça résoudrait le problème, mais j'ai mis ça en style inline vite fait alors que dans mon code c'est une class btn qui est présente sur les 4 btn ..... à moins que je coupe ma class en deux ...

.btn{display:inline-block}

.btn_margin{margin:0 0 20px 0}

et que je n'utilise pas la class btn_margin pour mes derniers éléments, mais bon ..... je viens de relire le tuto des fusions des marges et est expliqué que le padding, border, overflow et les floattant annulent la fusion des marges, mais pas les inline-block, du coup je continue à creuser, mais je ne sais pas si c'est une perte de temps ou non.
Modifié par Artefacus (01 Jun 2015 - 17:12)

Artefacus a écrit :
mais j'ai mis ça en style inline vite fait alors que dans mon code c'est une class btn qui est présente sur les 4 btn ..... à moins que je coupe ma class en deux ...

Hehehe si tu le dis pas, je fais avec ce que j'ai hein j'avais pas pris ma boule de cristal sèur moi

Sans rire, c'est effectivement étrange, le display:inline-block; fait sauter la fusion des marges....

Du coup je pense que la solution que tu proposes avec une classe supplémentaire va être la plus rapide à mettre ne place.

Faudra peut-être demander une màj de l'article, je voulais laisser un commentaire dessous mais ce n'est pas possible.

Bonne aprem !

Bonjour,

oui, bon .... le <p> et le <span>, c'était pour faire une démo vite fait ^^.

Ce que je cherche à obtenir c'est de laisser le margin sur tous les btn, mais que les deux derniers mergent avec le parent vert.

Du coup, visuellement c'est comme si les deux derniers btn étaient en inline :

<div style="background:green;margin:0 0 40px 0">
		<span style="background:red;display:inline-block;margin:0 0 20px 0">btn_01</span>
		<span style="background:red;display:inline-block;margin:0 0 20px 0">btn_02</span>
		<p style="margin:0 0 20px 0">text qui le fait bien</p>
		<span style="background:red;display:inline;margin:0 0 20px 0">btn_01</span>
		<span style="background:red;display:inline;margin:0 0 20px 0">btn_02</span>
</div>

je vais pt être finalement passer mes éléments en inline s'il n'y a pas de solution avec les inline-block.....
Modifié par Artefacus (04 Jun 2015 - 10:30)

en fait non je ne px pas les passer en inline, sinon je perds les marges sur les deux premiers btn .....

du coup, à part couper ma class en deux ou faire une class de "reset" sur la marge des derniers btn, je ne vois pas trop quoi faire d'autre.

Enfin bon , si tu veut faire des test fiable, fait le avec un HTML valide histoire de ne pas perdre de temps par la suite ou du moins reflétant ton code réel.
tu vas pas mettre une roue de vélo sur une moto juste pour tester le frein arrière et encore moins la tenue de route , non ?

un test simple par exemple :

<div>
  <span>btn_01</span>
  <span>btn_02</span>
  <span class="block_text">text qui le fait le  bien ?</span>
  <span>btn_01</span>
  <span>btn_02</span>
</div>

div {
  background: green;
}

.block_text {
  display: block;
  margin: 0.5em 0;
  background: none;
}

span {
  display: inline-block;
  background: red;
}

http://codepen.io/anon/pen/eNvxqZ
enfin, si les btn_X sont des <button> , pourquoi ne pas les tester directement ?
Modifié par gc-nomade (04 Jun 2015 - 20:38)