title: Bootstrap: anchors and body top margin/padding
body: <p>I'm using Bootstrap with a global navbar fixed to the top of the page body. </p>
  
  <pre><code>    &lt;div class="navbar navbar-fixed-top navbar-inverse"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="brand" href="/"&gt;MyBrand&lt;/a&gt;
                  &lt;div class="nav-collapse collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li&gt;&lt;a href="#&gt;Page 1&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#&gt;Page 2&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#&gt;Page 3&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <pre><code>body {
      background-color: #f5f5f5;
      position: relative;
      margin-top: 40px;
  }
  </code></pre>
  
  <p>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 <a href="http://twitter.github.com/bootstrap/getting-started.html">http://twitter.github.com/bootstrap/getting-started.html</a>)</p>
  
  <pre><code>&lt;a href="#section1"&gt;Section 1&lt;/a&gt;
  &lt;a href="#section2"&gt;Section 2&lt;/a&gt;
  &lt;a href="#section3"&gt;Section 3&lt;/a&gt;
  
  [...]
  
  &lt;section id="section1"&gt;
      [...]
      [...]
      [...]
  &lt;/section
  &lt;section id="section2"&gt;
      [...]
      [...]
      [...]
  &lt;/section
  &lt;section id="section3"&gt;
      [...]
      [...]
      [...]
  &lt;/section&gt;
  </code></pre>
  
  <p>My problem is when the user clicks, the browser sticks the target to the very top of the screen, the content disappears <em>under</em> the navbar. I noticed Twitter used a trick, the targeted <code>&lt;section&gt;</code> tags include a "padding-top: 30px;", the closest <code>&lt;h1&gt;</code> include a "margin-top: 10px;" CSS directive in order the text to be displayed exactly 40px below the top of the screen.</p>
  
  <p>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?</p>