Padding

I slipped padding into my project’s CSS in order to make a box. Padding is the space around the object within its borders. Go to your project and add padding to your headings to give them more space on the top and bottom.

Padding example

Padding: 20px means that there is 20 pixels of padding on all sides of the object.

Padding: 20px 0 means that there is 20 pixels of padding on the top and bottom and none on the sides.

Padding: 20px 10px 0 5px means that the top has 20 pixels and then it moves around clockwise from there: 10 pixels of padding on the right, none on the bottom, and 5 pixels of padding on the left.

You can also assign padding to any specific side like this:

padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;

When you are adding padding, right click on your page that you are working on in your browser. Choose Inspect Element. Scroll down in the pane that opens to look for the picture like this one. This is from Google Chrome, other browsers have the same type of thing. The blue in the center is the HTML object that you are inspecting. The green shows the padding. You can even click right on those numbers (the 20 in the image above) and it will let you change the numbers right there to see it change it on the page right in front of you instead of going back into your code to test out every change. But make sure to change anything in your code that you want to keep! Changing it in the inspecting tool changes it in the browser but does nothing to your code.

Watch the lesson!