CodePen

HTML

            
              <div class="wrapper">
  <div id="box" class="box"></div>
</div>

<output></output>
            
          
!
via HTML Inspector

CSS

            
              body {
  padding-top: 50px;
}

.wrapper {
  width: 1000px;
  margin: 0 auto;
}

.box {
  width: 100px;
  height: 100px;
  background: goldenrod;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%;
}

output {
  width: 1000px;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-weight: bold;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('output').html('total height is: ' + $('#box').outerHeight());
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................