Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

CSS 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

Thats 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

=)

Not 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.

Hey,

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;
}

=)

Thanks 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?

I 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? =)

Thanks 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

Hey,

Have you set a width for the .list?

This should work:

.list {
    margin: 0 auto;
    width: 10%;

}

=)

Yes 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?

Sure,

Here you go:

http://teamtreehouse.com/library/css-layout-techniques

Happy Coding =)

Great! Thanks for your time and valuable help Damon Johnson. You and your beautiful baby rock!