清楚的边距-顶部值:左

问题描述 投票:1回答:3

所以,我有这段模拟表格的代码,我只想知道是否清除的段落的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>

演示

我想我真正想说的是:所有的浏览器 "清除 "的量都是一样的,可以这么说,还是不同的浏览器 "清除 "元素的量不同?Chrome浏览器似乎是以16或17px的量来清除,Firefox和IE也是如此。但这在各浏览器中真的是一致的吗?谅谅

html css margin
3个回答
1
投票

不,这可能取决于浏览器。

最好使用

#board p { margin: 0px; }

去掉页边距。

演示


为了使它看起来和您的代码一模一样,我做了一些改动。

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

演示


0
投票

我不明白你为什么要模拟一个表格。但首先,如果我对问题的理解正确的话,您想知道标签的默认页边距值是多少。<p> 对于所有的浏览器,或者如果他们是不同的这样和那样。好吧,这与表格或你试图模拟一个表格没有任何关系。答案是肯定的,根据浏览器和版本的不同,存在差异,这就是为什么你需要用CSS手动设置页边距,这样所有的浏览器就必须 "清除 "相同的amout。

干杯。


也是一个 <p> 标签可能有默认的 padding 所以你也需要指定这一点。


0
投票

所有的浏览器在渲染html元素时都有不同的默认设置。通常的做法是使用一个正常化的css文件来确保所有的浏览器都显示相同的内容。你可以试着自己写一个,但为什么要重新发明轮子呢?

http:/necolas.github.ionormalize.css

© www.soinside.com 2019 - 2024. All rights reserved.