Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Padding

Laercio Goncalves
Laercio Goncalves
887 Points
Posted by Laercio Goncalves
Laercio Goncalves
887 Points

Box occupying more space then "supposed" to. #padding #percentage

    <!-- parent / container -->
        <div  class="primary-content t-border">
            <p>
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
      <a href="#">Find out more</a>

      <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches the fish acquire a humpback and protuberant jaw. After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>, <a href="#">bears</a>, and <a href="#">Bald eagles</a>.
        </p>
      </div>
            <a href="#">See the Wildlife</a>
     </div>

.primary-content,
.secondary-content {
    width: 60%;
}

.wildlife {
    color: white;
    background-color: #434a52;
    padding: 18% 24%;
}

Ok so my screen total width is 2560wide, I set the body element to have a max-width of 1200px;

Since my .primary-content is defined to have a width of 60% or 720px (1200 * .6 = 720px). When I apply the padding: 18% 24%; ( 720 * 0.18 = 129.6px and 720 * 0.24 = 172.8px on .wildcard, I got the following values top bottom = 129.6px and left right = 172.8px right?

So here's the question, why my .wildcard box is occupying all the space available ( 720px wide) since the padding ( 172px wide ) + the content itself (374px wide) is equal 546px only.

172 + 374 = (546) != 720

why why

Thank you very much.

4 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Laercio Goncalves

It actually does equal 720. I think you're forgetting one side of the padding to be calculated:

Padding left = 172.797
Content = 374.406
Padding right = 172.797
Total = 720

Remember, Padding and Margins are applied to all sides as assigned. So, your padding of 172.797 is applied to the left side and right side.

Hope that clears it up for you.

Nice work! :) :dizzy:

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Are you confusing padding and margin - margin is space outside the border and padding is inside the border.

Playing with the margin and padding on this Pen might get you to your desired behavior.

Laercio Goncalves
Laercio Goncalves
887 Points
Laercio Goncalves
Laercio Goncalves
887 Points

Thank you for your reply, Dave StSomeWhere.

I understand what you said but my doubt is why the .wildlife box is taking all the space available since there is no margin, border or anything else applied to it, as you can see in my screenshot of the box model, and the total width of the box model is 172 from the padding and 374 which is from the content itself totalizing 546px, but as you can see in the second screenshot the .wildcard is taking 720px..

Laercio Goncalves
Laercio Goncalves
887 Points
Laercio Goncalves
Laercio Goncalves
887 Points

Hi Jason Anders, Thank you very much ?!

That definitely clears up! I was so focused on the "why" that I didn't realize that I was only calculating one side of the padding. Best regards, Laercio.