Should I place the border above or below header to separate sections?

If the content is split into several sections, and each section has a header, should I put border below or above the header?

The “border below” approach seems prevalent (see Google, Wikipedia) but “border above” seems to work better as a separator. Which is the way to go?

Border Above

enter image description here

Border Below

enter image description here

Answer

The reason you are having difficulty deciding which to use is that the section headings are too far from the content. A larger space = separation, a closer space = association, but there must be enough difference between “larger” and “closer” to make it clear to the eye which is which. Here, the information grouping and the visual grouping are in conflict.

You can see the problem if you take the rule out completely. The heading is almost exactly half way between the content above and below it. So the heading becomes ambiguous; it associates equally with what is above it and what is below. (This is easier to see if you use random characters in place of the actual headings, so that the meanings of the words don’t blind you to the purely visual presentation.)

Visual spacing should parallel the information structure. If you use Border Below, reduce the space above and below the border to about one third of its current amount, and the design will snap into place. For Border Above, reduce the spacing below the border and between the heading and the content.

Either way, the visual grouping and the information grouping will agree, and your design will work. The rule (border) here is a decorative element, not a data separator as it might be in a table or a spreadsheet.

Attribution
Source : Link , Question Author : Dan , Answer Author : Alan Gilbertson

Leave a Comment