Question

我有以下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>

demo

但无法实现我的期望。我需要两个div之间的空间。如果我给出填充值，它将提供空间但不删除背景。

Answer 1

您需要将border-spacing和border-collapse规则放在父 div上，而不是table-cell div。

Answer 2

将display: table-cell;更改为display: inline-table;或display: inline; 我希望这就是你要找的东西。

Answer 3

试试JSFiddle

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

#main
{
    border-spacing:10px;
}

Answer 4

在父div中添加“border-spacing”

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

Answer 5

使用以下属性：

<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;
}

Answer 6

只需更改您的css代码，如下所示：

#one, #two{
    display: inline; 
    vertical-align: middle; 
    height: 47px; 
    background: red;
    border-collapse: separate; 
    border-spacing: 10px;
}

我将显示属性 table-cell 更改为内嵌。您也可以使用内嵌表格

接下来你可以使用 margin 属性在两个块之间留出空间（即margin-left：20px;）。

两个显示表格单元格之间的边距

6 个答案: