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 Layout Techniques Grid Layout Creating the Grid Container

Posted by Mika Kalathil
Mika Kalathil
Courses Plus Student 2,732 Points

Why padding?

Why is there a padding of 10px to both the left and right of the grid? Is it just for looks?

5 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Mika,

All right, so it is definitely a little confusing, but this seems to be what's going on:

In the Global section of the CSS document, when he assigns the padding-left and padding-right to the .grid-container class, those values are creating the 10px buffer on the left and right sides of the entire grid system, as a whole. They are NOT contributing to the gutters (my bad).

Once he's selected the child elements of the .grid-container parent and adds the padding-left and padding-right, as well as the margin, the margin is indeed what is creating the gutters here. The padding properties are what you would typically expect them to be, which is adding padding to the content inside whatever elements you put on the page that use those .grid-# classes.

If it's still confusing, follow along with his code (and/or download the project files), open up the page in the browser, and add/remove/tweak the padding-left and padding-right values, saving and refreshing the browser in between in change to see where those values are being applied.

Let me know if this helps.

Erik

Mika Kalathil
Mika Kalathil
Courses Plus Student 2,732 Points

This helps thanks. That answers my other question on if I can change the padding and just keep it at 0 while retaining the margin.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Mika,

The padding-left and padding-right values are what total the "gutter" between the individual columns within your grid system. In short, yes, the gutters are there to help with the way your page will look when it's laid out using the grid system that you're building and implementing.

Erik

Mika Kalathil
PLUS
Mika Kalathil
Courses Plus Student 2,732 Points
Mika Kalathil
Mika Kalathil
Courses Plus Student 2,732 Points

Ok that's what I originally thought but then why have both margin and padding. If your setting margin left to 20px', when you set padding left to 10px wouldn't that mean the content starts 30px from the left then?

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Mika,

It looks like I may have spoken too soon; let me check out the previous two videos to get a little more context and I'll get back to you with an answer :)

Erik

Mika Kalathil
Mika Kalathil
Courses Plus Student 2,732 Points

Thanks! This confused me a lot because theres no explanation for the padding in the video and I'm not quite sure if it's just used to space the elements from the sides of each column. I see how the padding could be the gutter by then why the margin left is needed at all confuses me

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Or, a simpler, smaller example to copy and paste into HTML/CSS files is:

<!doctype html>
<html lang="en-US">
    <head>
        <title>Page Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="grid-container">
            <div class="grid-1">grid 1 size</div>
            <div class="grid-2">grid 2 size</div>
            <div class="grid-2" id="no-padding">grid 2 size w/o padding properties Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, nobis, alias nisi neque illum voluptate.</div>
        </div>
    </body> 
</html>

.grid-container {
    padding-left: 10px;
    padding-right:; 10px;
    margin: 0 auto;
    width: 1000px;
}

.grid-container > [class^="grid-"] {
    padding-left: 10px;
    padding-right: 10px;
    margin: 2%;
    background: tomato;
    min-height: 1px;
    float: left;
}

#no-padding {
    padding: 0;
}

.grid-1 {
    width: 6.5%;
}
.grid-2 {
    width: 15%;
}

Just make sure you save the CSS file in the same location as the HTML file, and name the CSS style.css, then open your HTML file in the browser to get an example. You'll see three columns, the first one being 6.5% wide (of 1000px, like in the video) and that has the 10px padding on the left and right. The next column is 15% wide (of 1000px, like in the video) that has the 10px padding on the left and right. The third column is again 15% wide, just like the second column, but the padding has been removed. You can see that the total width of the column does not change, but the content INSIDE of it is now right up against the side of its containing element, because that padding has been removed.

Erik