Title: Bottom div within td, zero margin
Tags: css;html;html-table
Question: <!DOCTYPE html&gt;
<html&gt;
<head&gt;
<title&gt;MyTitle</title&gt;
<style type="text/css"&gt;
body
{
background-image:url('images/my.png');
/*width:100%;*/
height:100%;
background-repeat:no-repeat;
background-size:100%;
/*background-position:0,0,0,0px;
background-position:center;*/
margin: 0;
padding: 0;
}
html
{
height: 100%;
}
</style&gt;
</head&gt;
<body&gt;
<table cellpadding="0" cellspacing="0"
style="height:100%; width: 100%; border-collapse: collapse; background-color: Red; border-color:Yellow;"&gt;
<tr style="background-color: Green;"&gt;
<td style="background-color: Blue; text-align: center; vertical-align: bottom; padding-bottom:0px;"&gt;
<div style="margin: 0px 0px 0px 0px; background-color:Silver;"&gt;
<button type="submit"&gt;Some text</button&gt;
<p style=""&gt;Another text</p&gt;
</div&gt;
</td&gt;
</tr&gt;
</table&gt;
</body&gt;
</html&gt;
FF4. The window is blue, it means td fills the whole window. The div has zero margins, td has zero paddings. Nevertheless, there is a blue rectangle between the div and the bottom edge of the window. How to avoid it? Margin-bottom: -16px; is not an option.
Thank you.
Comment: You are welcome: http://sybicit.com/index2.htm Thank you for being interested in my problem.

Comment: How about posting a URL so we can see the problem. Thanks!

Here is the accepted answer: The problem is with the p element - specifically its margin-bottom.
Collapsing margins are the reason this is happening:
http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can fix it in this instance with overflow: hidden on the div which is the parent of the p.
Your code: http://jsbin.com/enote5
Your code with the fix: http://jsbin.com/enote5/2
(or you could just remove the margin on the p, if you like)


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:06/11/11', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><html><html-table>', 'Title': 'Bottom div within td, zero margin', 'ViewCount': 1349, 'id': 6318313, 'user_AboutMe': "<p>All my points go away as reward. That's it.</p>\n", 'user_AccountId': 95352.0, 'user_DisplayName': 'noober', 'user_Reputation': 4689.0, 'user_Views': 344.0, 'user_id': 259731.0}}