I want to know the rules surrounding the vertical padding and vertical borders for inline elements in inline formatting context.

The span1 to span12 are aligning on the basis of the text. But, they still have a weird border / padding around them which overlaps the surrounding content.

I am trying to figure out a basis for the behaviour in the CSS spec. This is what the spec says: