Closed Bug 485352 Opened 15 years ago Closed 15 years ago

P margins are pushed outside of containing div

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: itay.malimovka, Unassigned)

Details

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.
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
Closed: 15 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.