diff --git a/Base/home/anon/www/margin-collapse-1.html b/Base/home/anon/www/margin-collapse-1.html
new file mode 100644
index 0000000000..a71abe391e
--- /dev/null
+++ b/Base/home/anon/www/margin-collapse-1.html
@@ -0,0 +1,16 @@
+
+
foo
+bar
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index 19306ae8cd..ed0c2e14b1 100644
--- a/Base/home/anon/www/welcome.html
+++ b/Base/home/anon/www/welcome.html
@@ -28,6 +28,7 @@ span#ua {
Your user agent is:
Some small test pages:
+ - margin collapsing 1
- position: absolute, offset from edges
- iframe
- many buggies
diff --git a/Libraries/LibWeb/Layout/LayoutBlock.cpp b/Libraries/LibWeb/Layout/LayoutBlock.cpp
index 19318a9551..114a4df77d 100644
--- a/Libraries/LibWeb/Layout/LayoutBlock.cpp
+++ b/Libraries/LibWeb/Layout/LayoutBlock.cpp
@@ -477,7 +477,14 @@ void LayoutBlock::compute_position()
if (relevant_sibling) {
auto& previous_sibling_style = relevant_sibling->box_model();
position_y += relevant_sibling->effective_offset().y() + relevant_sibling->height();
- position_y += previous_sibling_style.margin_box(*this).bottom;
+
+ // Collapse top margin with bottom margin of previous sibling if necessary
+ float previous_sibling_margin_bottom = previous_sibling_style.margin().bottom.to_px(*relevant_sibling);
+ float my_margin_top = box_model().margin().top.to_px(*this);
+ if (previous_sibling_margin_bottom > my_margin_top) {
+ // Sibling's margin is larger than mine, adjust so we use sibling's.
+ position_y += previous_sibling_margin_bottom - my_margin_top;
+ }
}
set_offset({ position_x, position_y });