4

表示がインラインブロックに設定された要素を含むdivがあります。これらの含まれる要素にはさまざまな高さがあります。結果として得られるdivの線は、その中の要素の高さに応じてさまざまな高さになります。これは私が望む通りです。しかし、divの行の間にスペースを追加したいと思います。たとえば、背景色が設定された隣接する線の要素には、それらの間に目に見えるギャップがあるはずです。paragrpahの一般的なアドバイスは、行の高さを設定することですが、これにより、div内のすべての行に同じ高さが設定されます。これは望ましくありません。すべての行を同じ高さにせず、含まれている要素を変更せずに、行の間にスペースを設定する方法はありますか？

簡略化した形式では、HTMLコンテンツは次のようになります。

<div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    ...
</div>

各内部divには、異なるコンテンツがあります。異なる高さと幅です。

すべての内部divをスタイリングできます。実用的には、私はすでにそれを行っており、一緒に暮らせる結果が得られています。しかし、CSSには行間隔を設定する明確な方法がないことに驚きました（つまり、行の高さではなく、行間のスペース：行の高さについては知っていますが、直接、行の間隔と（この場合は望ましくない）すべての線を同じ高さにする効果があります-線のすべての要素の高さが低い線でも）。行の高さを設定せずに、行の間隔を外側のdivのパラメーターとして設定する方法があるかどうか知りたいです。

私はそれを行間隔と考えていますが、別の見方をすれば、外側のdiv全体ではなく、外側のdivの各行の上下の余白であり、すべての内側の上下の余白を上書きすることはありません。 divs（これは私が今行ったことです）またはすべての行を同じ高さにします（line-heightと同じです）。

内側のdivのマージンを上書きせずにそれを行うことができる唯一の方法は、単に共通のマージンを設定するために、それぞれを別のdivでラップすることです。このようにすると、2つのdivのマージンが崩れることはなく、一緒に暮らすことができます。これは、すべてのコンテンツがdivであるこの場合は十分に機能しますが、テキストとdivが混在している場合（つまり、テキストにdivが散在している場合）は機能しません。行間隔を指定します。

4

4 に答える 4

2

P要素のCSSマージンまたは境界線設定を試してみませんか？

于 2012-07-30T02:24:34.370 に答える
2

cssパディングプロパティを使用するのはどうですか？例えば：

padding:25px;

次のように指定することもできます：padding-right、padding-bottomなど。

于 2012-07-30T02:26:02.217 に答える
1

marginそれはスタイルを使用してのみ行うことができます。DIV含まれている各を別のでラップする必要はありませんDIV。STYLEタグを使用するだけです。

これが例です。デモ用にボーダーとカラーリングを追加しました。

<style>
    #container     {width:30ex; outline:1px solid black; padding:0 .2em; background:white;}
    #container>div {display:inline-block; margin:.2em 0; background:#fca;}
</style>
<div id="container">
    <div style="height:1em">variable</div>
    <div style="height:5em">variable stuff variable</div>
    <div style="height:2em">variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:3em">variable stuff variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
</div>
于 2012-07-30T11:07:25.110 に答える
0

インラインブロックで列を使用しようとすると、各列にはより多くのdivがあります。

<div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
</div>
于 2013-01-21T20:58:13.803 に答える