Why is padding not working?

Hi Larry, You should have said:

.primary-content{ padding: 25px 0 95px; }

The error you were getting was specifying "padding-top", but then giving it three different values. You should have just said "padding".

A great feature of CSS markup is that you can use shorthand properties to keep your code DRY and in turn reduce the file size of the stylesheets. By doing so, you cut down on bandwidth and in-turn increase the speed of your website loading times.

When it comes to CSS, every bit of speed and size makes a difference in page optimization.

Understanding Shorthand properties will make it easier for you to use them.

** Lets start with a 1 value example.****

margin: 10px;

Since only 1 value was used. 10px will be applied to all different sides of the box model.

Therefore

margin: 10px 

The longhand way of writing the following code.

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

Now, let's look at what happens when 2 values are used in the SHORTHAND form.

margin:  10px 5px;

The first value represents the vertical margins ( top, bottom) and the second value represents the horizontal margins ( left, right)

The longhand way of writing the following code

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

How about when 3 values are used in the SHORTHAND form

  margin:  10px 5px 6px;

The first value represents the top margin, the second value represents the horizontal ( left, right), and the third value represents the bottom margin.

The longhand way of writing the code is as follows

 margin-top: 10px;
 margin-right: 5px;
 margin-bottom: 6px;
 margin-left: 5px;

Lastly, if 4 values were used in the SHORTHAND form

  margin:  10px 5px 6px 2px;

The first value represents the Top margin, the second value represents the Right margin, the third value represents the Bottom margin and the fourth value represents the Left margin.

The longhand way of writing the code is as follows

 margin-top: 10px;
 margin-right: 5px;
 margin-bottom: 6px;
 margin-left: 2px;

I hope this makes things clearer, keep in mind that you cannot write

margin-top: 5px 6px 3px; 

Because shorthand values cannot be applied to specific properties. Because margin-top represents only the top margin value, it will only take 1 value and apply it.

Images were taken from the Mozilla CSS documentation. Click here to read more.

Hi there you can just always keep this in mind when adding the values, for example .primary-content { padding: 25px 0 95px 0; } this sets the padding top 25px right 0px bottom 95px left to 0px and to help you understand the values listed above

.primary-content { padding: top right bottom left; }

but there are several ways you can accomplish adding your desired padding it just depends on which values that you require examples of short hand below

.primary-content { padding: 25px; } this sets all sides of the padding to 25px

.primary-content { padding: 25px 55px 60px; } this is setting the padding 25px top 55px left and right while setting the bottom to 60px

.primary-content { padding: 25px 50px; } this makes the top and bottom padding 25px while the left and right are set to 50px

hope this helps

Thanks so much for the help. It brought more clarity and I was able to finally get it to work.