Table cellspacing with CSS
Is it possible to add spacing between the cells?
<!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>
Use margin property:
#wrap div {
background-color:green;
float:left;
margin:10px;
padding:20px;
}
If this is not exactly what you want to achieve, please let me know so that I can help.
Edit: Another approach is to do this:
#wrap {
border-spacing:20px;
display:inline-table;
}
but note that border-spacing is not fully supported on all browsers (IE6 & IE7 does not support it).
加载中,请稍侯......
精彩评论