Question

I am currently restyling a form, and now I’m fighting with a CSS issue:

• To see it, go here: http://temp.meyerdevelopment.nl/

• Then click on the “Continue” link, to be found under the “Checkout as
  a Guest or Register” heading.

You’ll see a bunch of fields, and the problem lies with the space between the “Last Name” and “Company” fields. I believe the margins of the elements should fuse, resulting in equal spacing between all elements.

The top-margin of the “First Name” field and the bottom-margin of the “Last Name” field aren’t incorporated into the height of the enclosing div. This is correct in my opinion.

Problem:
Somehow the bottom margin of the “Last Name” field is incorporated in the enclosing <li>. I believe this shouldn’t happen.

Also note that the top-margin of the “First Name” field isn’t incorporated into the the height of the <li> element (which I believe IS correct). How can this be???

PS:
The reason I haven’t tried changing the weird mark-up is because I can’t. I suppose I could, but it would be a little complex, so I’m staying with changing the styles.

Edit:
I found the root cause of my problem:
The LI element is the target of a major clearfix CSS rule that comes with the standard Magento CSS. The selector+rule that causes the problem is:

li:after {
  content: ".";
}

This CSS-generated period is what prevents the margin of the inner DIVs to fuse with the margins of the siblings (other LIs) of their container (the LI). Because the period is added AFTER the LI, the bottom margin CANNOT fuse, while the topmargin can and does.

Answer 1

It’s because .field elements have 4px margins above and below. Have you tried the selector “.field + .field”? Doing just a margin-top on that means that you only have margin spacing for fields when they are consecutive. Do you think that would work?

Edit: It does look strange, though, that the li.fields considers that bottom margin, but div.customer-name doesn’t. In any case, you can try the selector I suggested, and report your findings.