Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>$elem.offset() does not account for html border - JS Bin</title>
  <meta name="description" content="$elem.offset() does not account for html border">
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
  
  <div class="content">
    
    <p>Borders:<br>
      Content <code>div</code>: blue, <code>body</code>: red, <code>html</code>: black
    </p>
    
    <dl>
      <dt>$content.offset().top</dt>
      <dd class="offset"></dd>
    </dl>      
    <dl>
      <dt>content.getBoundingClientRect().top</dt>
      <dd class="gbcr"></dd>
    </dl>
    <dl>  
      <dt>ddE.clientTop (width of top border on <code>html</code>)</dt>
      <dd class="clienttop"></dd>
    </dl>
    
  </div>
  
</body>
</html>
 
html {
  margin: 32px;
  border: 8px solid black;
  padding: 16px;
}
body {
  margin: 4px;
  border: 1px solid red;
  padding: 2px;  
}
.content {
  border: 1px solid blue;
  padding-left: 1em;
}
dt, dd {
  display: inline-block;
  padding: 0;
  margin: 0;
}
dt {
  min-width: 300px;
}
 
$( function () {
  var $content = $( ".content" );
  
  $( ".offset" ).text( $content.offset().top );
  $( ".gbcr" ).text( $content[0].getBoundingClientRect().top );
  $( ".clienttop" ).text( document.documentElement.clientTop );
  
} );
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hashchangepro
0viewers