box-model meaning

Question

Hello!

I am looking at the box-model tab in my web console in Firefox. I see the following 1) At the very top, I see: 809 x 377 static What does this calculation mean?? static??

2) The biggest outer box or the most outer box is colored brown and has these numbers going around it clockwise: 0, 0, -5 What does box and numbers mean?

3) The second inner box is colored yellow and has these numbers going around it clockwise: 0, 0, 0 What does box and numbers mean?

4) The third inner box is colored green and has these numbers going around it clockwise: 20, 20, 20, 20 What does box and numbers mean?

5) the most inner box is blue and has this calculation inside: 769 X 337

what does this calculation mean.

6) When styling why do I need to look at the box-model, I would think looking at the computed style, and rules in the web console under inspector is enough, not sure??

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="normalize.css">
<style>
body{
font : normal 1.1em/1.5 sans-serif;
color : #222;
background-color: #edeff0;

}


.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.main-footer { background-color: #b7c0c7;}

/*.main-wrapper{
width:90%;
margin:auto;

 } */

.main-header{
padding:20px;
display:table;
width:100%;
min-height:250px;//doesnt work


}

.main-logo, .main-nav, .main-nav li{
display:inline-block;
border-radius:5px;
}

*{
box-sizing:border-box;
}

.main-nav{
padding-left:50px;


}



.main-nav li{
margin-right:10px;



}


.main-logo{

width:150px;


}


.main-logo a, .main-nav a{

display:block;
padding: 10px 20px;
text-align:center;
color:white;
text-decoration:none;

}


 .main-logo, .main-nav{
 display:table-cell;
 vertical-align:middle; // not in the middle of the header

 }



 @media(max-width:768px)
 {
 .main-logo,
 .main-nav,
 .main-nav li, .colbe{
 display:block;
 width:initial;
 margin:initial;
 height:initial;


 }
 .main-nav{
 padding-left:initial;

 }

 .main-nav li{
 margin-top:15px;

 }
 .main-banner{
 display:none;

 }


 }

 .colbe{

 display:inline-block;
 padding:20px;
 margin-right:-5px;  
 vertical-align:top;


 }

 .primary-content{

 width:60%;
 }
 .secondary-content{

 width:40%;
 }

 html,
 body,
 .main-wrapper,
 .colbe{
 height:100%;

 } 


 .main-footer{
 text-align:center;
 padding:20px;

 }
 .main-banner{
 background:#ebedee;
 text-align:center;
 padding:35px 15px;


 }




</style>

</head>

<body>
<div class="main-wrapper">
<header class="main-header"> 
<h1 class="main-logo"><a href="#">logo</a></h1>
<ul class="main-nav">
<li> <a href="#">Link 1 </a></li>
<li> <a href="#">Link 2</a></li>
<li> <a href="#">Link 3</a></li>
<li> <a href="#">Link 4</a></li>
</ul>

</header>

<div class="primary-content colbe">
<h2> Primary Content </h2>
<p>deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
</p>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
 </p>
</div>

<div class="secondary-content colbe">
<h2> Secondary Content </h2>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
</p>
<hr>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a

</p>
</div>
<div class="main-banner">
<h1>This is our main banner </h1>
<p>eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a </p>
</div>

<footer class="main-footer">
<p>&copy; 2014 Example Layout </p>
</footer>

</div>
</body>
</html>

Fyi, I am using inline style just for this post Cheers

Answer 1 · 2014-06-30T00:58:17Z

June 30, 2014 12:58am

I believe it is telling it's CSS positioning type. So you know it is static vs fixed or absolute etc...

http://www.w3schools.com/css/css_positioning.asp

Answer 2 · 2014-06-26T04:31:02Z

June 26, 2014 4:31am

1) This calculation is the combination of the width + the leftpadding + the right padding by the height + the top padding + the bottom padding static means it doesn't change

2) The biggest outer-box represents your margins. the numbers are the values of the margins. 0 0 -5 0 would be 0 top, 0, right, -5 bottom, 0 left in pixels

3) The second inner box is your border values. 0 0 0 0 top, right, down, left (a re-occurring theme.) in pixels

4) The first inner box is your padding 20 20 20 20 is 20, 20, 20, 20 top, right, down, left in pixels

5) is the base width and height of the box.

The reason this is useful is often something will break your design, often the padding,margin or border. Using this helps you figure out if something is the correct width or height.

Example, say you have a base design that is 2 columns well say column 1 has a set width of 200px while the other column has a set with of 800px. You create a unordered list in the 200px column and set it's width at 200px. You notice that your 800px column is pushed off the screen about 40px. That is because the unordered list has a default padding-left of 40pixels. Using this box on the 800px column shows that the static width is 800px, so that is not your problem, but if you look over at the 200px column you'll notice it's static is now 240. That's because the padding always adds to the width of the object that it is set on. So changing the unordered list to 160px width fixes your problem.

Answer 3 · 2014-06-28T12:30:36Z

June 28, 2014 12:30pm

hello, 809 x 377 does not mean multiply 809 by 377. it means.

809 wide by 377 heigh

so in #1 it is just telling you the static calculated values of width and height are: 809 wide by 377 heigh

The calculated value comes from #5 769x377

809 in #1 is the width of #5 added to the padding of both sides 769 + 20 (left padding) + 20 (right padding) 377 in #1 is the height of #5 added to the padding of both top and bottom 337 + 20 (top padding) + 20 (bottom padding)

Does that make sense?

Answer 4 · 2014-06-28T08:26:13Z

June 28, 2014 8:26am

Hello James,

1) I undersdand answer 1, but there is a mutilplication, so I am not sure how to tie it in to your answer.( 809 x 377)?

2 got it thanks!

3 got it!

4 got it!

5) I wonder how these 2 measurements differ: 769 X 337 and 809 x 377? and also what do you mean by base?

6) Number 6 is so well explained. Now I see how I can box model.

thanks James!!!

Answer 5 · 2014-06-30T00:47:18Z

June 30, 2014 12:47am

Hello James, yes it totally makes sense:) Just one thing why it it necessary for the console to mention that it is 'static', I would think in a case like this, the measurements are always the same regardless the postition is relative, static, or absolute.

Cheers!!

Answer 6 · 2014-06-30T02:26:36Z

June 30, 2014 2:26am

Thanks James!! I am totally clear on this!!!

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

box-model meaning

6 Answers

James Andrews

James Andrews

James Andrews

James Andrews

James Andrews

James Andrews

orange sky

orange sky

2 got it thanks!

3 got it!

4 got it!

orange sky

orange sky

orange sky

orange sky

orange sky

orange sky