Bootstrap: anchors and body top margin/padding

Question

I'm using Bootstrap with a global navbar fixed to the top of the page body.

    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">MyBrand</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#>Page 1</li>
                        <li><a href="#>Page 2</li>
                        <li><a href="#>Page 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

I added a 40px margin on top of the body in order the top of page content underlying not to be overlayed by the navbar.

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

Up to there, everything works fine. I also make usage of internal anchors in order to ease the navigation inside the page, using the same mechanisms Twitter used with the affix component on the Bootstrap documentation, making the user able to jump to different sections within the page (see http://twitter.github.com/bootstrap/getting-started.html)

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>

[...]

<section id="section1">
    [...]
    [...]
    [...]
</section
<section id="section2">
    [...]
    [...]
    [...]
</section
<section id="section3">
    [...]
    [...]
    [...]
</section>

My problem is when the user clicks, the browser sticks the target to the very top of the screen, the content disappears under the navbar. I noticed Twitter used a trick, the targeted <section> tags include a "padding-top: 30px;", the closest <h1> include a "margin-top: 10px;" CSS directive in order the text to be displayed exactly 40px below the top of the screen.

I cannot allow me to "lose" 40px between each section, my display have to remain compact. My question is: is there a way in order internal anchors not to stick to the very top of the screen view but to remain away from of the top of the screen an arbitrary length?

Answer 1

Finally, I figured out how to easily solve this issue:

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

section {
    padding-top:40px;
    margin-top:-40px;
}

This means a 40px margin is added on top of the body, a 40px padding is added on top of the sections, a negative 40px margin is also added in order to move up their respective expected locations, introducing an invisible margin taken into account when the browser draws the display to a section after an anchor is clicked.

Hope this help.