2

私は次のHTMLとCSSを持っています

#one,
#two {
  display: table-cell;
  vertical-align: middle;
  height: 47px;
  background: red;
  border-collapse: separate;
  border-spacing: 10px;
}
<div>
  <div id="one">one</div>
  <div id="two">two</div>
</div>

デモ

しかし、私の望み通りには達成できませんでした。2 つの div の間にスペースが必要です。パディング値を指定すると、スペースが与えられますが、背景は削除されません。

4

6 に答える 6

3

border-spacingおよびborder-collapseルールは、div ではなく、親divに配置する必要がありますtable-cell。

于 2013-07-24T09:13:41.823 に答える
1

JSFiddle を試す

http://jsfiddle.net/arunberti/WNKCZ/1/

#main
{
    border-spacing:10px;
}
于 2013-07-24T09:19:45.253 に答える
1

親divに「border-spacing」を追加

<div style="border-spacing: 10px;">
<div id="one">one</div>
<div id="two">two</div>
</div>
于 2013-07-24T09:30:28.823 に答える
1

次のプロパティを使用します。

<div style="border-spacing: 10px;">
    <div id="one">one</div>
    <div id="two">two</idv>
</div>

または、次の css スタイルを使用します。

#one, #two{
    display: table-cell; 
    vertical-align: middle; 
    height: 47px; 
    background: red;
    border-collapse: separate; 
    border-spacing: 10px;
    border: 3px solid #fff;
}
于 2013-07-24T09:33:56.007 に答える