P margins are pushed outside of containing div

RESOLVED INVALID

Status

()

RESOLVED INVALID
10 years ago
10 years ago

People

(Reporter: itay.malimovka, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.0.7) Gecko/2009030423 Ubuntu/8.10 (intrepid) Firefox/3.0.7
Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.0.7) Gecko/2009030423 Ubuntu/8.10 (intrepid) Firefox/3.0.7

Use this code, shows the problem, no margin between divs should have been!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
	p{
		background-color: transparent;
		margin: 10px;
		color: white;
	}
	div{
		background-color: black;
		margin:0;
		width: 300px;
	}
</style>
</head>
<body>
<div>
	<p>aaaaaaaaaaa</p>
	<p>bbbbbbbbbbb</p>
	<p>ccccccccccc</p>
</div> 
<div>
	<p>aaaaaaaaaaa</p>
	<p>bbbbbbbbbbb</p>
	<p>ccccccccccc</p>
</div> 
</body>
</html>


Reproducible: Always

Steps to Reproduce:
run this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
	p{
		background-color: transparent;
		margin: 10px;
		color: white;
	}
	div{
		background-color: black;
		margin:0;
		width: 300px;
	}
</style>
</head>
<body>
<div>
	<p>aaaaaaaaaaa</p>
	<p>bbbbbbbbbbb</p>
	<p>ccccccccccc</p>
</div> 
<div>
	<p>aaaaaaaaaaa</p>
	<p>bbbbbbbbbbb</p>
	<p>ccccccccccc</p>
</div> 
</body>
</html>
Actual Results:  
margins between divs are visible.

Expected Results:  
no margins expected

have a nice and wonderful day, Tell Tomer I said HI.

Updated

10 years ago
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Yep, this is known as margin collapsing; see the URL in comment 1.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.