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
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsCSS Padding Issue
Hello everyone here,
Hope all is well!
I have issues with this padding attribute. I posted my HTML and CSS code below. Can you please have a look at them and tell me why borders are applying for list items?
<!DOCTYPE html>
<html>
<head>
<title>N-th Child Pseudo Selector</title>
<link rel="stylesheet" href="css/pseudoclass.css"/>
</head>
<body>
<div class="list">
<ul>
<li>Welcome</li>
<li>Welcome</li>
<li>Welcome</li>
<li>Welcome</li>
<li>Welcome</li>
</ul>
</div>
</body>
</html>
body{
background-color: #ccc;
padding: 1% 50%;
}
.list {
border: 2px dotted grey;
}
I am sure that it is because of padding attribute. But I do not know how it works?
Thanks in advance,
4 Answers
Damon Johnson
Courses Plus Student 2,775 PointsThats right. It will go to 100% of the parent element. In this case, the class of .list, as that's not been assigned a width either, so its 100% of the available browser width.
Have you taken a look at the web design track on here? Its amazing at explaining basic positioning in CSS
=)
Damon Johnson
Courses Plus Student 2,775 PointsHey,
I think the border property will apply to everything contained in the list div, unless overridden by a new property,
So, if you added the below to under the .list css property, it would change the border on the li's
.list li {
border: 10px red;
}
=)
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsThanks for your response. I do know to set border but the problme is border is not applying because I have padding 50% vertically.
padding: 1% 50%;
Do you know how this padding works?
Damon Johnson
Courses Plus Student 2,775 PointsI think you are setting a padding to high in the body. With this, its set to 50% left and right, so its squashing the list. Try knocking the padding to 40% and it should be better.
Do you why you are using padding? If its to center an element, I think you're better using the margin property, set your top and bottom margins, and use auto for the left and right, see below:
.list {
margin: 10px auto;
}
Hope this is what you mean? =)
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsThanks for your message again. I tried setting margin for class(list). But it does not work. Do you know why?
.list{
margin: 10px auto;
}
<body>
<div class="container">
<div class="link">
<a href="#"class="welcomemessage">Welcome To India</a>
</div>
<div class="list">
<ul>
<li>Welcome</li>
<li>Welcome</li>
<li>Welcome</li>
<li>Welcome</li>
<li>Welcome</li>
</ul>
</div>
</div>
</body>
Thanks in advance for your answer
Damon Johnson
Courses Plus Student 2,775 PointsHey,
Have you set a width for the .list?
This should work:
.list {
margin: 0 auto;
width: 10%;
}
=)
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsYes it does work now. But why did you set width for .list class name? It seems .list class orginal width is web browser's screen width. Is it true so?
Damon Johnson
Courses Plus Student 2,775 Points
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsGreat! Thanks for your time and valuable help Damon Johnson. You and your beautiful baby rock!
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Pointsnvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsNot yet. Can you please give me a link to basic positioning in CSS video? I checked I did not basic positioning in web design track.