Positioning Anchor Links With CSS

I am not sure how common of a problem nor am I aware of how popular the solution is. I find this particularly useful for sites with a static navigation at the top. Using anchors on this page would normally cause the targeted element to scroll to the top of the page, below the navigation, and invisible to the user.

First Attempt: Top Margin

My first attempt at accomplishing this involved adding a top margin to the desired elements. The expected result was to see appear that distance below the top of the window. Unfortunately all this does is start the first element at the desired position but it does not keep it there when linked to it. It also creates an undesired space between this element and the preceding.

Second Attempt: Top Padding

For my next attempt I used a top padding. This worked. Using a top padding causes the element to appear that distance below the top of the window this is because padding is on the inside of the element's border and is considered part of the element. Unfortunately, this still gives undesired space between items using this technique.

Solution: Top Padding, Negative Top Margin

Since the margin does not affect the anchor positioning while the padding does and both affect the visual position on the page I used a top padding on the desired list of elements and a negative margin to bring them back up to the correct position visually.

The CSS

/*Add this class to desired elements*/
.anchor {
	padding-top: 50px; /*Provides a 50px top margin*/
	margin-top: -40px; /*Leave 10px of space between elements*/
}