Home > Article > Web Front-end > td的margin为什么会失效,如下图,请赐教,务必详细,如下图,拜谢_html/css_WEB-ITnose
浏览器显示如下
dreamweavercs5代码编辑如下:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
首先,我们需要知道的是:我们可以对表格table设置margin,而不能设置padding;对单元格td设置padding,而不能设置margin。所以说,我们不能对单元格td设置margin属性来调整单元格与单元格之间的距离,但是我们可以使用一下方法来达到同样的效果。
1) 设置padding
就像刚才所说的那样,我们可以对单元格td设置padding属性来调整单元格之间的间隔
td{padding:5px 10px;}
2) 使用标签
我们可以在单元格td内添加标签,然后对标签设置margin属性
p{margin:5px 10px;}
3) 对表格table设置border-spacing(IE不支持)
先让我们简单了解一下border-spacing属性。border-spacing:length;设置单元格td的边在横向和纵向上的间距。当您指定一个length值时,这个值将作用于横向和纵向上的间距;当您指定两个length值时,第一个将作用于横向间距,第二个值将作用于纵向间距。
table{border-spacing:5px 10px;}
首先,感谢您的回答,有一点疑问想请教前辈,在上面,我上传的代码中已经对table设置了padding和margin,而且在浏览器中也都确实显示出来,请您再看一下,你说的table不可以设置padding,是不是有什么特殊性,再次感谢您的解答
哦,豁然开朗啊。