webentwicklung-frage-antwort-db.com.de

CSS-Anzeige: Inline-Block akzeptiert Rand oben nicht?

Ich habe ein Element mit Anzeige: Inline-Block, aber es scheint Rand-oben nicht zu akzeptieren. Liegt das daran, dass das Element immer noch als Inline-Element behandelt wird?

Wenn ja, hat jemand eine Problemumgehung?

EDIT # 1:

Mein CSS ist ganz einfach:

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

Am Ende habe ich den Inhalt in einem anderen Div verpackt und dem einen Rand oben gegeben. Aber das verursacht viel zusätzliches Markup und macht meinen Code weniger klar.

EDIT # 2:

margin-top & margin-bottom auf inline-block Elemente scheinen nur mit positiven Werten zu funktionieren.

csspositionlabelmargin
59
Gregory Bolkenstijn

Ich benutzte display: table. Es hat die inhaltsanpassenden Eigenschaften eines Inline-Blocks, unterstützt jedoch auch negative Ränder in einer Weise, die den darauf folgenden Inhalt mit nach oben verschiebt. Wahrscheinlich nicht, wie Sie es verwenden sollten, aber es funktioniert.

24
baohouse

sie können auch versuchen, den negativen Rand durch zu ersetzen

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

zusätzlich zu dem Rest Ihres .label style

85
Einacio

Du kannst es versuchen vertical-align so was:

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

Ich habe ein Beispiel für jsfiddle gemacht: http://jsfiddle.net/zmmbreeze/X6BjK/ .
Aber Vertical-Align funktioniert unter IE6/7 nicht gut. Und es gibt einen Opera (11.64) -Rendering-Bug.

Also empfehle ich position:relative stattdessen.

17
Zachary

Das ist in der Tat der Fall. Anstelle eines Randes können Sie auch eine Polsterung verwenden. Eine andere Lösung wäre die Verwendung eines container div für das Element. Sie machen das div inline-block, und machen Sie Ihr aktuelles Element zu einem Block in diesem Container. Dann können Sie Ihrem Element einen Spielraum geben.

Es wäre hilfreich, wenn Sie ein konkretes Beispiel hätten, vorzugsweise in jsfiddle.net oder so. Es würde helfen, die Antworten zu präzisieren, anstatt nur allgemeine Beschreibungen wie meine hier zu enthalten. ;)

8
GolezTrol