web-dev-qa-db-ja.com

CSSディスプレイ：inline-blockはmargin-topを受け入れませんか？

Display：inline-blockの要素がありますが、margin-topを受け入れないようです。これは、要素がまだインライン要素として扱われているためですか？

「はい」の場合、回避策はありますか？

編集＃1：

私のCSSは非常に簡単です：

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

結局、コンテンツを別のdivにラップし、それをマージントップにした。しかし、それは多くの余分なマークアップを引き起こし、私のコードをあまり明確にしません。

編集＃2：

margin-top＆margin-bottom on inline-block要素は、正の値でのみ機能するようです。

csspositionlabelmargin
59
Gregory Bolkenstijn

display: tableを使用しました。インラインブロックのコンテンツフィッティングプロパティがありますが、負のマージンもサポートしており、それに合わせてコンテンツをシフトアップします。おそらくあなたはそれをどのように使用すべきかではありませんが、動作します。

24
baohouse

負のマージンを次のように置き換えることもできます

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

残りの.label スタイル

85
Einacio

次のようにvertical-alignを試すことができます：

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

Jsfiddleで例を作成しました： http://jsfiddle.net/zmmbreeze/X6BjK/ 。
ただし、IE6/7では垂直方向の配置はうまく機能しません。また、opera（11.64）レンダリングのバグがあります。

そのため、代わりにposition:relativeを使用することをお勧めします。

17
Zachary

確かにそうです。マージンの代わりに、パディングを使用できます。別の解決策は、要素にコンテナdivを使用することです。そのdivを作成しますinline-block、および現在の要素をそのコンテナ内のブロックにします。次に、要素にマージンを与えることができます。

できればjsfiddle.netなどで具体的な例を入手すると役立ちます。ここに私のような一般的な説明だけを含めるのではなく、回答をより具体的にすることも役立ちます。 ;）

8
GolezTrol