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 Foundations The Box Model Positioning Properties

Posted by name564681351614
name564681351614
3,497 Points

Padding vs "left: 150px"

It's not clear to me when you would use the padding strategy vs the "left, right, top bottom: 150px" strategy. Don't they accomplish the same thing? Would you just use the padding command if you wanted the same thing on all 4 sides? Otherwise it's quicker to just indicate the side that you want space on?

.bottom {
    background: #20B2AA;
    position: relative;
    z-index: 30;
    left: 150px;
}

Wouldn't the above be the same as the following?

.bottom {
    background: #20B2AA;
    position: relative;
    z-index: 30;
    padding: 0 0 0 150px;
}

3 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Eric,

There is a subtle difference. The left property will move the entire element by 'n' units from the left, whereas padding-left will move the element's content by 'n' units from the left. An easy way to visualize these differences is by applying a border to each with different colors.

<!DOCTYPE html>
<html>
<head>  
    <style>     
        p.one {
            position: relative;
            left: 150px;
            border: 1px solid blue;
        }
        p.two {
            position: relative;
            padding-left: 150px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus accusantium iste explicabo delectus molestiae ab veniam sed quos atque velit quas pariatur, assumenda, minus eaque? Maxime libero, dolores modi vitae.</p>
    <p class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugit possimus atque recusandae, accusantium quibusdam qui necessitatibus doloribus porro quam deserunt eum itaque totam fugiat omnis perspiciatis animi odit quos!</p>
</body>
</html>
Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Eric,

To start off yes they do accomplish the same thing but one major difference, when you use padding it stays within the normal flow of the page meaning elements remain together and push one another out of the way when something doesn't fit quite right whereas position properties such as left don't follow this rule and move elements out of the normal page flow.

I don't think I need to go on any more than that as the difference pretty much explains itself, see the below pen for an example.

http://codepen.io/ChrisUpjohn/pen/ZYGpyO

Matthew Orndoff
Matthew Orndoff
9,018 Points
Matthew Orndoff
Matthew Orndoff
9,018 Points

I'm assuming by left you mean padding-left. If all you need is padding on one side, then you could do that. It just comes down to preference. The padding property is really for convenience as a shorthand property if you don't want to specify every value for padding-left, padding-right, padding-top, padding-bottom.

Just like font is used for convenience over filling out font-family, font-size, font-weight, etc individually.