Question

所以，我有这个用于模拟表的代码，我只想知道清除段落的margin-top是否总是16~17 px。是的，我知道我可以将<table>用于表和诸如此类的东西，但关键是不要使用表元素。如果您感到困惑，只需在浏览器中编辑并运行此代码：

<!DOCTYPE html>
<html>
<head><title></title>
<style type = 'text/css'>

body {margin: 0px; font-family: "Times New Roman";}

#board {position: absolute; top: 50px; left: 50px; 
height: 481px; width: 481px; margin: 0px; padding: 0px; background-color: black; }

div.row > p:first-child { clear: left; } 

#board > div.row:first-child { margin-top: -16px;} 
#msg p { margin-top: -17px; }
div.row {margin-left: 1px; }

p { width: 31px; height: 31px; padding: 0px; border: 1px #DFDEDC solid; 
float: left; margin-left: -1px; color: black; text-align: right; }

</style></head>
<body>
<div id = 'board'>
<div class = 'row'><p></p> // 15 paragraphs </div>

<div id = 'msg'>
<div class = "row"><p></p> ... </div>
<div class = "row"><p></p> ... </div>
<div class = "row"><p></p> ... </div>
<div class = "row"><p></p> ... </div>
<div class = "row"><p></p> ... </div>
<div class = "row"><p></p> ... </div> // 15 rows, etc
</div> // end msg
</div> // end board
</body>
</html>

Demo

我想我真正想说的是：所有浏览器“清楚”的数量是否相同，可以这么说，或者以不同的数量做不同浏览器的“清晰”元素？ Chrome似乎清晰度为16或17px，Firefox和IE也是如此。但这是否真的在浏览器中保持一致？感谢

Answer 1

不，它可能取决于浏览器。

更好地使用

#board p { margin: 0px; }

删除边距。

Demo

为了使它看起来与您的代码完全一样，我做了一些更改：

body{/*...*/} #board{/*...*/}
#board .row {
    margin-bottom: -1px;
    overflow: hidden;
}
#board p { 
    width: 31px;
    height: 31px;
    padding: 0px;
    border: 1px #DFDEDC solid; 
    float: left; 
    margin: 0px; margin-right: -1px;
    color: black; 
    text-align: right;
}

Demo

Answer 2

我不明白你为什么要模仿一张桌子。但首先，如果我正确理解了这个问题，你想知道所有浏览器的标签<p>的默认边距值是什么，或者它们是不同的。那与表格无关，或者你试图模仿一个表格。答案是肯定的，取决于浏览器和版本，存在差异，这就是为什么你需要用CSS手动设置边距，这样所有浏览器就必须“清除”相同的结果。

干杯。

此外，<p>代码可能还有默认padding，因此您也需要指定该代码。

Answer 3

所有浏览器都有不同的默认设置，用于呈现html元素。通常的做法是使用规范化的css文件来确保所有浏览器都显示相同的内容。你可以尝试自己写一个，但为什么要重新发明轮子？

http://necolas.github.io/normalize.css/

保证金的最高值：左

3 个答案: