Closed Bug 178367 Opened 23 years ago Closed 23 years ago

span padding/mardin not affecting vertical placement of later inline elements in same block

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Windows 2000
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: Rob.Jones, Assigned: dbaron)

Details

When setting padding and/or margins on a span (and potentially other inline elements) the padding is not having any effect on vertical placement of later inline elemenets in the same block. The following code illustrates this. ----------START CODE <html> <head> <title>Div Span Css Test</title> <style type="text/css"> .box1 { background : Navy; color : White; } .box2 { background : Green; color : White; } .box3{ background : Navy; color : White; padding : 5px 5px 5px 5px; } .box4 { background : Green; color : White; padding : 5px 5px 5px 5px; border : solid Aqua; } .box5 { background : Navy; color : White; padding : 5px 5px 5px 5px; border : solid Aqua; margin : 5px 5px 5px 5px; } .box6 { background : Navy; color : White; padding : 5px 5px 5px 5px; border : solid Aqua; margin : 0px 0px 0px 0px; } .box7 { background : Green; color : White; padding : 5px 5px 5px 5px; border : solid Aqua; margin : 0px 0px 0px 0px; } .box8 { background : Navy; color : White; padding : 0px 0px 0px 0px; border : thin solid Aqua; margin : 0px 0px 0px 0px; } .box9 { background : Green; color : White; padding : 0px 0px 0px 0px; border : thin solid Aqua; margin : 0px 0px 0px 0px; } .box10 { background : Navy; color : White; padding : 0px 0px 0px 0px; border : none; margin : 0px 0px 0px 0px; } .box11 { background : Green; color : White; padding : 0px 0px 0px 0px; border : none; margin : 0px 0px 0px 0px; } </style> </head> <body> Box Tests <BR> Boxes used in the tests <BR> <div class="box1">Box 1 - blue - simple</div> <div class="box2">Box 2 - green - simple</div> <div class="box3">Box 3 - blue - padded</div> <div class="box4">Box 4 - green - padded - cyan border</div> <div class="box5">Box 5 - blue - padded - cyan border - 5px margin</div> <div class="box6">Box 6 - blue - padded - cyan border - 0px margin</div> <div class="box7">Box 7 - green - padded - cyan border - 0px margin</div> <div class="box8">Box 8 - blue - 0px padded - 1px border - 0px margin</div> <div class="box9">Box 9 - green - 0px padded - 1px border - 0px margin</div> <BR> <BR>Box Tests <BR> <BR>Test 1, simple boxes, side by side <BR> <span class="box1">Box 1</span><span class="box2">Box 2</span><span class="box1">Box 1</span><span class="box2">Box 2</span> <BR> <BR> <BR>Test 2, padded box, then simple box <BR> <span class="box3">Box 3</span><span class="box2">Box 2</span> <BR>Result: Box 2 has been moved to the right due to the padding in 'Box 3' (The left hand box). <BR> <BR> <BR>Test 3, two padded boxes <BR> <span class="box3">Box 3</span><span class="box3">Box 3</span> <BR>Result: Box 3 is even more to the right due to left and right hand side padding <BR> <BR> <BR>Question: What would you expect to see if we have a box beneath a padded box ? <BR>Something like this ? <BR> <div class="box3" style="width: 40px">Box 3</div> <div class="box2" style="width: 40px">Box 2</div> <BR> <BR>Or with margins using box 6 and 7 <BR> <div class="box6" style="width: 40px">Box 6</div> <div class="box7" style="width: 40px">Box 7</div> <BR> <BR>This has been achieved using divs which are blocks <BR>but if we use spans which are inline and let this go over one end of line we get <BR> <BR> <span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span><span class="box6">Box 6</span><span class="box7">Box 7</span> <BR> <BR>Only the content of the boxes is correctly placed, <BR>The padding and margins have had no effect on vertical placement of later boxes. </body> </html> ----------END CODE
This is how it's supposed to work. See: http://www.w3.org/TR/CSS21/visudet.html#q15 http://www.w3.org/TR/CSS21/visudet.html#line-height
Status: UNCONFIRMED → RESOLVED
Closed: 23 years ago
Resolution: --- → INVALID
Agreed. Invalid. I had read specs before submitting bug. I think that section 9.4.2 Inline formatting context implies that padding/margins heights should apply but agree that comments in 10.8.1 make it clear that border/margins should "blead" into other cells *but* only within line boxes.
v
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.