Readability is really improved by consistency in text alignment, horizontally and vertically. But what we call “vertical rhythm” is sometimes hard to manage on our web layouts.
Here, just a little mixin to control your vertical rhythm with LESS and the pseudo-class :first-child (compatible with ie7+)
// Define the base line-height
@base-line-height: 1.5em;
// Add margin top, except the first element
.vertical-rhythm () {
margin-top: @base-line-height;
&:first-child {
margin-top: 0;
}
}
// Apply the mixin to our elements
.content {
padding: 2em;
& > * {
.vertical-rhythm;
}
}
