20

私はこれが非常に基本的な CSS であることを知っています。スパンを div 内に保持するにはどうすればよいですか? 現時点では、スパンは div の上部と下部の外側に拡張されています。

div {
  width: 200px;
  margin: 10px;
  background-color: #ff0;
}
span {
  margin: 5px;
  padding: 5px;
  background-color: #fc0;
}
<body>
  <div>
    <span>span</span>
  </div>
</body>

4

3 に答える 3

47

あなたの質問に答えると、これはpaddingまたはだけの問題ではなく、 、、およびボックス モデルmarginの問題でもあります。widthdisplay

jsフィドル

span {
    display: inline-block;
}

これにより、スパンに適用するパディング、マージン、または幅が優先されます。

于 2012-05-19T14:41:32.323 に答える
3

インライン要素は、垂直パディングとマージン スペースを消費しません。スパンを作成できますが、display: block詳細がないと、それが目標を達成できるかどうかわかりません。

于 2012-05-19T14:30:18.173 に答える
0

インラインの置換されていないボックス (スパンなど) の垂直方向のパディング、ボーダー、およびマージンは、コンテンツ領域の上部と下部から始まり、「行の高さ」とは関係ありません。ただし、ライン ボックスの高さを計算するときは、'line-height' のみが使用されます。したがって、ここに重複が表示されます: http://jsfiddle.net/Q9AED/

単純な解決策を使用したい場合は、 display: inline-block: using line- height ではなく line-height を使用できます。

display: inline-block は、Safari >= 2、Opera >= 9、IE >= 8、Firefox > 3 で動作します。ただし、IE < 8 ではインライン ブロックを模倣できます: display: inline; ズーム: 1.

于 2012-05-19T15:19:34.657 に答える