web-dev-qa-db-fra.com

Affichage CSS: inline-block n'accepte pas margin-top?

J'ai un élément avec display: inline-block, mais il ne semble pas accepter margin-top. Est-ce parce que l'élément est toujours traité comme un élément en ligne?

Si oui, quelqu'un a-t-il une solution?

EDIT # 1:

Mon CSS est assez simple:

.label {
  background: #ffffff;
  display: inline-block;
  margin-top: -2px;
  padding: 7px 7px 5px;
}

J'ai fini par envelopper le contenu dans une autre div et en lui donnant une marge supérieure. Mais cela provoque beaucoup de balisage supplémentaire et rend mon code moins clair.

EDIT # 2:

margin-top & margin-bottom sur inline-block les éléments ne semblent fonctionner qu'avec des valeurs positives.

csspositionlabelmargin
59
Gregory Bolkenstijn

J'ai utilisé display: table. Il a les propriétés d'ajustement de contenu du bloc en ligne, mais prend également en charge les marges négatives d'une manière qui déplacera le contenu en le suivant. Probablement pas comment vous devriez l'utiliser, mais cela fonctionne.

24
baohouse

vous pouvez également essayer de remplacer la marge négative par

.label{
    position:relative;
    top:-2px;
}

en plus du reste de votre .label style

85
Einacio

Tu peux essayer vertical-align comme ça:

.label {
  background: #ffffff;
  display: inline-block;
  margin-top: -2px;
  vertical-align: 2px;
  padding: 7px 7px 5px;
}

J'ai fait un exemple sur jsfiddle: http://jsfiddle.net/zmmbreeze/X6BjK/ .
Mais l'alignement vertical ne fonctionne pas bien sur IE6/7. Et il y a un bug de rendu opéra (11.64).

Je recommande donc d'utiliser position:relative au lieu.

17
Zachary

Tel est bien le cas. Au lieu d'une marge, vous pouvez utiliser un rembourrage. Une autre solution consisterait à utiliser un conteneur div pour l'élément. Vous faites ce div inline-block, et faites de votre élément actuel un bloc à l'intérieur de ce conteneur. Ensuite, vous pouvez donner une marge à votre élément.

Il serait utile que vous obteniez un exemple concret, de préférence sur jsfiddle.net ou plus. Cela aiderait également les réponses à être plus spécifiques, au lieu de contenir uniquement des descriptions générales comme la mienne ici. ;)

8
GolezTrol