In Issue 406 of A List Apart, Heydon Pickering precisely describes my complaint about HTML margins:
“Margins are something that exist between elements. Simply giving an element a top margin makes no sense, no matter how few or how many times you do it. It’s like applying glue to one side of an object before you’ve determined whether you actually want to stick it to something or what that something might be.”
By default, HTML headings, paragraphs, and lists have top and bottom margins. These extra margins often cause unexpected or unwanted collisions at the beginning or end of a containing element, depending on whether or not the containing element has its own margin or padding.
Tyfy uses adjacent sibling selectors (in this case, Mr. Pickering’s lobotomized owl) to put vertical margins between elements instead of assigning blanket margins to everything. This avoids the problem of having margins at the start and end of a containing element that must then be accounted for.
Tyfy includes mixins and utility classes (in the spacing module) to facilitate enabling and disabling adjacent sibling margins in contexts where they are not needed.
Spacing Rules
By default, adjacent sibling margins are applied to all elements. They can be turned off by customizing the settings.
The tymargins-size and tymargins mixins apply the style rules. There are three rules included in the tymargins mixin:
-
The first rule applies a margin of
tyspacing(md)between all adjacent siblings.@include tymargins-size(all,tyspacing(md)); -
The second rule applies a margin of
tyspacing(sm)between all adjacent siblings inside ordered, unordered, and definition lists. The smaller margin visually emphasizes the logical relationship between elements in a list.@include tymargins-size(lists,tyspacing(sm)); -
The third rule applies a margin of
tyspacing(lg)to the top of any heading that follows a non-heading element. The increased margin visually emphasizes the logical separation of content indicated by a heading.@include tymargins-size(headings,tyspacing(lg));
For more information about the spacing variables, see the settings module. To learn more about the tymargins-size and tymargins mixins, see the mixins documentation. To learn more about turning the margins on and off, see the spacing module.