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 Display Values

Posted by Osama Awan
Osama Awan
Courses Plus Student 8,676 Points

Border bottom increasing with padding

Why the length of border bottom under the learn more is increasing with padding i'm confused?

1 Answer

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

Padding means the space between the element border and element content. Therefore by increasing padding, the inner length and height of the border or any element will increase as well

some element {
padding: 10px;
}

This will make space INSIDE the element and thus increasing its width and height. But if you dont want it to happen and if u just want to move the border either horizontally or vertically..use MARGINS instead. Margin means the space AROUND the element...therefore when u do something like this

some element {
margin: 10px;
}

this will actually make 10px of space on each side OUTSIDE the element.... Hope you understand, mark my answer as the best if i managed to help u