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 Layout The CSS Box Model Padding

Posted by Jonathan Diaz
.a{fill-rule:evenodd;}techdegree
Jonathan Diaz
Front End Web Development Techdegree Student 30 Points

padding size not updating when inspecting page

This is in regards to the padding in CSS starting at 3.00 of the video. I added the padding in CSS. When I inspect the webpage, The Box doesn't update to reflect the padding size (px)that was added to CSS. It still appears as if no coding reflecting the padding was added to the CSS file.

Peter Vann
Peter Vann
36,425 Points

Hi Jonathan!

Can you post samples of your code (both the HTML and CSS), so I can better evaluate the situation/issues?

Thank you!

-Pete

Jonathan Diaz
.a{fill-rule:evenodd;}techdegree
Jonathan Diaz
Front End Web Development Techdegree Student 30 Points

Thank you Pete! It appears that I wasn’t using the inspect tool in Chrome properly. Sorry for any miscommunication.

Thanks again, Take care!

3 Answers

Peter Vann
Peter Vann
36,425 Points

Hi Jonathan!

It worked fine for me.

But, I put the CSS in a style tag in the head like this:

<head>
  <meta charset="UTF-8">
  <title>Developer Diane's blog</title>
  <style>
    header { 
      background-color: #294969;
      color: ghostwhite;
      padding: 10px 15px;
      border-width: 12px;
      border-style: solid;
      border-color: #ffa949;
    }
  </style>
</head>

If it works there, but not in the CSS file, then I suspect your path to the CSS file in the link might be off.

Here:

<link rel="stylesheet" href="css/style.css">

Make sure your style.css file is in the css folder and that the css folder is in the same folder as the HTML file.

Sometimes I will add grossly conspicuous CSS directive in my CSS file to test if the HTML is seeing the CSS file all, such as:

body {
  background-color: lime;
}

I also run the code on a playground, such as here:

https://www.w3schools.com/js/tryit.asp?filename=tryjs_array

Or CodePen, to see the actual results of my code...

I hope that helps.

Stay safe and happy coding!

Peter Vann
Peter Vann
36,425 Points
Peter Vann
Peter Vann
36,425 Points

BTW,

Read this, if you get a chance:

https://teamtreehouse.com/community/cheatsheet

So you can learn how to markdown your code in the forums so it formats it like mine just did.

I hope that helps.

Stay safe and happy coding!

Jonathan Diaz
.a{fill-rule:evenodd;}techdegree
Jonathan Diaz
Front End Web Development Techdegree Student 30 Points

I tried this link before and it sends me to a discussion page. I tried it again and I still don’t see the cheatsheet. The link leads to a discussion page with student questions

Peter Vann
Peter Vann
36,425 Points
Peter Vann
Peter Vann
36,425 Points

Sorry about that...

You can find the info here, for sure:

https://github.com/treehouse/cheatsheets/commit/5637293fdde5983b39548c3b3ef67998777b9922

I hope that helps.

Stay safe and happy coding!