使用CSS的表单元格间距

是否可以在单元格之间添加间距？使用CSS的表单元格间距

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <style> 
    #wrap { 
    display: table-row; 
    /* there is no also cellspacing in CSS afaik :(*/ 
    } 
    #wrap div { 
    display: table-cell; 
    /* margin: 40px; doesn't work for table-cell :(*/ 
    /* border: 30px solid transparent; works but it's as good as adding padding */ 
    /* border: 30px solid white; works but the page background is invisible */ 

    /* decoration: */ 
    background-color: green; 
    padding: 20px; 
    } 
    </style> 
</head> 
<body> 
    <!-- don't touch the markup --> 
    <div id="wrap"> 
    <div>text1</div> 
    <div>text2</div> 
    </div> 
</body> 
</html>

来源

2010-03-26 antpaw

可能重复的[如何在CSS中设置cellpadding和cellspacing？]（http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css） – user 2014-03-07 20:42:30

使用margin属性：

#wrap div { 
background-color:green; 
float:left; 
margin:10px; 
padding:20px; 
}

如果这不是正是你想要达到什么样的，请让我知道，这样我可以提供帮助。

编辑：另一种方法是做到这一点：

#wrap { 
border-spacing:20px; 
display:inline-table; 
}

但要注意，边框间距不完全支持所有浏览器（IE6 IE7 &不支持）。

来源

2010-03-26 09:28:02 o15a3d4l11s2

我喜欢你的第一个解决方案“border-spacing”更好，因为float会让我陷入清晰的地狱。太糟糕了，没有“border-spacing-left” – antpaw 2010-03-26 09:42:15

保证金不适用于显示为表格单元格的项目。如果用户想要构建一个可变的N行项目并自动填充它们，则需要使用表格单元格，直到新的CSS功能得到广泛支持。在这种情况下，只有你的第二个答案适用，如果你能澄清这一点，这将是非常好的。 – Brent 2013-07-24 19:37:49

使用CSS的表单元格间距

回答

相关问题