LibWeb: Account for collapsed top margins in BFC root height calculation

By the time we're measuring the height of a BFC root, we've already
collapsed all relevant margins for the root and its descendants.
Given this, we should simply use 0 (relative to the BFC root) as the
lowest block axis coordinate (i.e Y value) for the margin edges.

This fixes a long-standing issue where BFC roots were sometimes not tall
enough to contain their children due to margins.
This commit is contained in:
Andreas Kling 2025-02-21 20:10:35 +01:00 committed by Andreas Kling
parent 7eace6af66
commit 16662ab230
Notes: github-actions[bot] 2025-02-22 17:42:36 +00:00
22 changed files with 92 additions and 52 deletions

View file

@ -362,6 +362,10 @@ CSSPixels FormattingContext::compute_auto_height_for_block_formatting_context_ro
// If it has block-level children, the height is the distance between
// the top margin-edge of the topmost block-level child box
// and the bottom margin-edge of the bottommost block-level child box.
// NOTE: The top margin edge of the topmost block-level child box is the same as the top content edge of the root box.
top = 0;
root.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
// Absolutely positioned children are ignored,
// and relatively positioned boxes are considered without their offset.
@ -375,12 +379,8 @@ CSSPixels FormattingContext::compute_auto_height_for_block_formatting_context_ro
auto const& child_box_state = m_state.get(child_box);
CSSPixels child_box_top = child_box_state.offset.y() - child_box_state.margin_box_top();
CSSPixels child_box_bottom = child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom();
if (!top.has_value() || child_box_top < top.value())
top = child_box_top;
if (!bottom.has_value() || child_box_bottom > bottom.value())
bottom = child_box_bottom;

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x89.4375 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x102.875 [BFC] children: not-inline
BlockContainer <body> at (8,21.4375) content-size 784x73.4375 children: not-inline
BlockContainer <h1> at (8,21.4375) content-size 784x35 children: inline
frag 0 from TextNode start: 0, length: 6, rect: [8,21.4375 105.53125x35] baseline: 27.09375
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x89.4375] overflow: [0,0 800x94.875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x102.875]
PaintableWithLines (BlockContainer<BODY>) [8,21.4375 784x73.4375]
PaintableWithLines (BlockContainer<H1>) [8,21.4375 784x35]
TextPaintable (TextNode<#text>)

View file

@ -0,0 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 100x308 [BFC] children: not-inline
BlockContainer <body> at (8,200) content-size 100x100 children: not-inline
BlockContainer <div#pink> at (8,200) content-size 100x100 children: not-inline
BlockContainer <div#orange> at (8,200) content-size 50x17 children: inline
frag 0 from TextNode start: 0, length: 3, rect: [8,200 18.828125x17] baseline: 13.296875
"lol"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 100x308] overflow: [0,0 108x308]
PaintableWithLines (BlockContainer<BODY>) [8,200 100x100]
PaintableWithLines (BlockContainer<DIV>#pink) [8,200 100x100]
PaintableWithLines (BlockContainer<DIV>#orange) [8,200 50x17]
TextPaintable (TextNode<#text>)

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x128 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x136 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x102 children: not-inline
BlockContainer <div.box> at (18,26) content-size 200x100 floating [BFC] children: not-inline
BlockContainer <ul> at (48,16) content-size 744x102 children: not-inline
@ -35,7 +35,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemMarkerBox <(anonymous)> at (304,101) content-size 12x17 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x128] overflow: [0,0 800x136]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x136]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x102] overflow: [8,16 784x120]
PaintableWithLines (BlockContainer<DIV>.box) [8,16 220x120]
PaintableWithLines (BlockContainer<UL>) [8,16 784x102]

View file

@ -1,12 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x138 [BFC] children: not-inline
BlockContainer <body> at (8,30) content-size 784x100 children: not-inline
BlockContainer <div.not-bfc> at (8,30) content-size 784x20 children: not-inline
BlockContainer <div.bfc> at (8,80) content-size 784x0 [BFC] children: not-inline
BlockContainer <div.not-bfc> at (8,110) content-size 784x20 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116] overflow: [0,0 800x130]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x138]
PaintableWithLines (BlockContainer<BODY>) [8,30 784x100]
PaintableWithLines (BlockContainer<DIV>.not-bfc) [8,30 784x20]
PaintableWithLines (BlockContainer<DIV>.bfc) [8,80 784x0]

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x1710 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x1772 [BFC] children: not-inline
BlockContainer <body> at (8,70) content-size 784x1632 children: not-inline
BlockContainer <p.min-block-test> at (8,70) content-size 784x700 children: inline
frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.875x76] baseline: 58.984375
@ -24,8 +24,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (8,1772) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1710]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1710]
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1772]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1772]
PaintableWithLines (BlockContainer<BODY>) [8,70 784x1632]
PaintableWithLines (BlockContainer<P>.min-block-test) [8,70 784x700]
TextPaintable (TextNode<#text>)

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x83 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x91 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x67 children: not-inline
BlockContainer <p> at (8,16) content-size 784x17 children: inline
frag 0 from TextNode start: 0, length: 36, rect: [18.625,16 300x17] baseline: 13.296875
@ -16,7 +16,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x83]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x91]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x67]
PaintableWithLines (BlockContainer<P>) [8,16 784x17]
PaintableWithLines (InlineNode(anonymous))

View file

@ -1,18 +1,18 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x36.59375 children: not-inline
FieldSetBox <fieldset> at (24,15.59375) content-size 752x17 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x22.5 children: not-inline
FieldSetBox <fieldset> at (24,15.59375) content-size 752x2.90625 [BFC] children: not-inline
LegendBox <legend> at (26,1.5) content-size 36.328125x17 children: inline
frag 0 from TextNode start: 0, length: 5, rect: [26,1.5 36.328125x17] baseline: 13.296875
"login"
TextNode <#text>
BlockContainer <(anonymous)> at (8,44.59375) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,30.5) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x36.59375] overflow: [8,1.5 784x51.09375]
FieldSetPaintable (FieldSetBox<FIELDSET>) [10,8 780x36.59375] overflow: [12,1.5 776x51.09375]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x22.5] overflow: [8,1.5 784x37]
FieldSetPaintable (FieldSetBox<FIELDSET>) [10,8 780x22.5] overflow: [12,1.5 776x37]
PaintableWithLines (LegendBox<LEGEND>) [24,1.5 40.328125x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,44.59375 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,30.5 784x0]

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x41 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x49 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x17 children: not-inline
Box <ul.globalnav-list> at (48,16) content-size 744x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div#item-1> at (48,16) content-size 46.734375x17 flex-item [BFC] children: inline
@ -12,7 +12,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x41]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x49]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x17]
PaintableBox (Box<UL>.globalnav-list) [8,16 784x17]
PaintableWithLines (BlockContainer<DIV>#item-1) [48,16 46.734375x17]

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x122 [BFC] children: not-inline
BlockContainer <body> at (8,10) content-size 784x104 children: not-inline
BlockContainer <div.container> at (8,10) content-size 200x104 children: inline
frag 0 from Box start: 0, length: 0, rect: [8,10 104x104] baseline: 104
@ -19,7 +19,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x120]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x122]
PaintableWithLines (BlockContainer<BODY>) [8,10 784x104]
PaintableWithLines (BlockContainer<DIV>.container) [8,10 200x104]
PaintableBox (Box<DIV>.grid) [8,10 104x104]

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x986 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x1048 [BFC] children: not-inline
BlockContainer <body> at (8,70) content-size 784x908 children: not-inline
BlockContainer <p.min-inline-test> at (8,70) content-size 784x200 children: inline
frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.875x76] baseline: 58.984375
@ -24,8 +24,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (8,1048) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x986]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x986]
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1048]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1048]
PaintableWithLines (BlockContainer<BODY>) [8,70 784x908]
PaintableWithLines (BlockContainer<P>.min-inline-test) [8,70 784x200]
TextPaintable (TextNode<#text>)

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x158 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x175 [BFC] children: not-inline
BlockContainer <body> at (8,25) content-size 784x125 children: not-inline
BlockContainer <div.empty_content> at (33,25) content-size 50x50 children: not-inline
BlockContainer <(anonymous)> at (33,75) content-size 50x0 children: inline
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x158]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x175]
PaintableWithLines (BlockContainer<BODY>) [8,25 784x125]
PaintableWithLines (BlockContainer<DIV>.empty_content) [33,25 50x50]
PaintableWithLines (BlockContainer(anonymous)) [33,25 50x50]

View file

@ -1,12 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x84 children: not-inline
BlockContainer <body> at (8,8) content-size 784x101 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 2x2 [BFC] children: not-inline
Box <table#empty-table> at (8,8) content-size 2x2 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> at (8,10) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
TableWrapper <(anonymous)> at (8,10) content-size 99.171875x82 [BFC] children: not-inline
TableWrapper <(anonymous)> at (8,10) content-size 99.171875x99 [BFC] children: not-inline
Box <table#full-table> at (8,27) content-size 99.171875x65 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
@ -64,16 +64,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,92) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,109) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x84]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x101]
PaintableWithLines (TableWrapper(anonymous)) [8,8 2x2]
PaintableBox (Box<TABLE>#empty-table) [8,8 2x2]
PaintableWithLines (BlockContainer(anonymous)) [8,10 784x0]
PaintableWithLines (TableWrapper(anonymous)) [8,10 99.171875x82]
PaintableWithLines (TableWrapper(anonymous)) [8,10 99.171875x99]
PaintableBox (Box<TABLE>#full-table) [8,27 99.171875x65]
PaintableWithLines (BlockContainer<CAPTION>) [8,10 82.734375x17] overflow: [8,10 90.953125x17]
TextPaintable (TextNode<#text>)
@ -89,4 +89,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableBox (Box<TR>) [10,71 95.171875x19]
PaintableWithLines (BlockContainer<TD>) [10,71 95.171875x19]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,92 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,109 784x0]

View file

@ -1,9 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x125 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x157 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x109 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 63.046875x109 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x141 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 63.046875x141 [BFC] children: not-inline
Box <table#full-table> at (10,42) content-size 59.046875x71 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
@ -81,14 +81,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,117) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,149) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x125]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x157]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x109]
PaintableWithLines (TableWrapper(anonymous)) [8,8 63.046875x109]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x141]
PaintableWithLines (TableWrapper(anonymous)) [8,8 63.046875x141]
PaintableBox (Box<TABLE>#full-table) [8,40 63.046875x75]
PaintableWithLines (BlockContainer<CAPTION>) [8,8 59.046875x34]
TextPaintable (TextNode<#text>)
@ -110,4 +110,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [39.25,90 27.796875x21]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,117 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,149 784x0]

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x312 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x404 [BFC] children: not-inline
BlockContainer <body> at (8,100) content-size 784x204 children: not-inline
TableWrapper <(anonymous)> at (108,100) content-size 89.34375x204 [BFC] children: not-inline
Box <table> at (109,101) content-size 87.34375x202 table-box [TFC] children: not-inline
@ -13,7 +13,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x312]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x404]
PaintableWithLines (BlockContainer<BODY>) [8,100 784x204]
PaintableWithLines (TableWrapper(anonymous)) [108,100 89.34375x204]
PaintableBox (Box<TABLE>) [108,100 89.34375x204]

View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x60 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 60.46875x60 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x87 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 60.46875x87 [BFC] children: not-inline
Box <table> at (8,35) content-size 60.46875x23 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
@ -26,8 +26,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,-2 800x602]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600] overflow: [0,-2 800x602]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x60] overflow: [8,-2 784x70]
PaintableWithLines (TableWrapper(anonymous)) [8,8 60.46875x60] overflow: [8,-2 60.46875x70]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x87] overflow: [8,-2 784x97]
PaintableWithLines (TableWrapper(anonymous)) [8,8 60.46875x87] overflow: [8,-2 60.46875x97]
PaintableBox (Box<TABLE>) [8,35 60.46875x23]
PaintableWithLines (BlockContainer<CAPTION>) [8,-2 60.46875x37]
TextPaintable (TextNode<#text>)

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x41 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x49 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x17 children: not-inline
BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline
TextNode <#text>
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x41]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x49]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x17]
PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0]
PaintableWithLines (BlockContainer<P>) [8,16 784x17]

View file

@ -0,0 +1,25 @@
<!doctype html><style>
* {
outline: 1px solid black;
}
html {
width: 100px;
}
body {
width: 100px;
height: 100px;
margin-top: 10px;
}
div#pink {
width: 100px;
height: 100px;
margin-top: 100px;
background: pink;
}
div#orange {
margin-top: 200px;
margin-right: 50px;
margin-bottom: 100px;
background: orange;
}
</style><body><div id="pink"><div id="orange">lol

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 343 KiB

After

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 590 KiB

After

Width:  |  Height:  |  Size: 534 KiB