Friday, October 30, 2015

Margin and padding

All inline elements except images lack margins, and will not take margin values.

Given a large enough negative margin applied to a large enough block element, the affected adjacent element can even be overlapped.

Collapsing margins
In cases where two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied. Only margins between two adjacent block elements of the same subtype will collapse.

Lists and headings are peculiar among block elements, so their margins will not be collapsed into the margins of the other block elements.

Padding properties behave in exactly the same manner as margin properties, with the following exceptions:
  • auto values are functionally useless in references to padding properties.
  • Negative padding values are invalid.
  • Padding is never collapsed.
  • Margin values are not applied to inline elements, but padding values are.

width and height cannot be applied to inline elements except for images, which can be assigned width and height even though they are inline elements.

Inline elements can only contain text or other inline elements.
margin, width, height, and float properties in style sheet rules applicable to these elements (except img and object) are ignored.

Inline elements are: a, em, strong, input, img, span, label, abbr, address, cite

No comments:

Post a Comment