So, I have this code for emulating a table, and I'd just like to know if the margin-top for paragraphs that are cleared is always 16 ~ 17 px. Yes, I know I could just use <table> for tables and whatnot, but the point is to not use the table element.
If you're confused, just edit and run this code in your browser:
<!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>
I guess what I'm really trying to say is: do all browsers 'clear' by the same amount, so to speak, or do different browsers 'clear' elements by different amounts? Chrome seems to clear by 16 or 17px, and so does Firefox and IE. But is this truly consistent across browsers? Thanks
No, it can depend on the browser.
Better use
#board p { margin: 0px; }
to remove margins.
To make it look like exactly like your code, I have done a few changes:
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;
}