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
Tushar Arora
1,760 PointsIssue with the Padding Property
Hi this is my HTML code
----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Tushar Arora | Software Developer</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<header>
<a href="index.html">
<h1>Tushar Arora</h1>
<h2>Software Developer</h2>
</a>
</header>
<div id="wrapper">
<section>
<ul>
<li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg" alt="number1"/></a></li>
<li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg" alt="number2"/></a></li>
<li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg" alt="number6"/></a></li>
<li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg" alt="number9"/></a></li>
</ul>
</section>
</div>
<footer>
<a href="https://www.google.com"><img src="img/facebook-wrap.png" alt="Facebook Icon"/></a>
<a href="https://www.bing.com"><img src="img/twitter-wrap.png" alt="Twitter Icon"/></a>
<p>© Tushar Arora</p>
</footer>
</body>
</html>
And below is my CSS code
header{
color: red;
background-color: black;
padding: 0px 140px;
margin: 0px 20px;
}
header a{
color: red;
}
header h1{
background-color: blue;
}
footer{
background-color: orange;
color: white;
margin: 20px auto;
padding: 20px;
}
footer p{
background-color: black;
}
#wrapper{
background-color: green;
}
-------------------------------------------------------------------------------------
In the CSS code for footer I have specified padding of 20px. This means that all the elements inside footer should be 20 px away from the border of the footer. But I see that the space between the element and the bottom edge of the footer seems to be greater than the space between elements and the footer left, top and right edges. As you can see in the image A seems to be greater than B. (A>B) Why this is so ?
2 Answers
Jonathan Grieve
Treehouse Moderator 91,254 PointsDo you mean to have a padding of 140px in your header or 14px? I don't see a screenshot so i can't visualise what it looks like but remember how each of the padding and margin values effect the elements
padding: 0 0 0 0;
//top right bottom left
padding: 0 0
//top/bottom left/right
It goes top right bottom left in that order. It's the same for margin values. :-)
By the way I changed your code to include Markdown code so we could see it better. Have a look at the Markdown cheat sheet to learn how to add your own markdown to the forums. :)
Michael Hicks
24,208 PointsMy guess is that the width of your footer is extending beyond the canvas so far that you don't see the padding take affect.
Try setting your footer 's width to 100% and/or play around with the width of the footers container.
Tushar Arora
1,760 PointsTushar Arora
1,760 PointsHi Thanks for answering. This is the image link http://screencast.com/t/wvDxA0xkmry My question is that I have specified padding of 20px for every element of footer. But in the footer as we can see in the image A is greater than B (A>B). Why this is so ? I have specified equal padding for top, bottom, left, right.