Floating child breaks margins from adjacent selector

RESOLVED DUPLICATE of bug 451791

Status

()

Core
Layout: Floats
RESOLVED DUPLICATE of bug 451791
5 years ago
5 years ago

People

(Reporter: Shane S. Anderson, Unassigned)

Tracking

21 Branch
x86_64
Windows 8
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
Created attachment 736584 [details]
cases.html

User Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)

Steps to reproduce:

Combined adjacent selector and negative margins to have a small margin between elements but a larger margin after the set of them, e.g.:
.field { margin-bottom: 20px; }
.field + .field { margin-top: -15px; }

Added a floating child to that element, e.g.:
.field::after { content: ""; display: block; clear: both; }
.field label { float: left; }

Added multiple elements together, as the only elements in a block, e.g.:
<form>
  <div class="field"><label>Label 1:</label></div>
  <div class="field"><label>Label 2:</label></div>
</form>


Actual results:

Negative margin was applied to all <div class="field" /> elements.


Expected results:

Negative margin should have been applied to the second <div class="field" /> element.

Comment 1

5 years ago
Sounds very much like bug 451791.

Updated

5 years ago
Attachment #736584 - Attachment mime type: text/plain → text/html
Indeed.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 451791
You need to log in before you can comment on or make changes to this bug.