7

So I have this html code:

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color:black;color:white;padding:20px">
        <h2>London</h2>
    </body> 
</html>

My question is, what does the padding:20px property do in the style attribute for the div element? Is that the same thing as doing padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px?

I tried putting (padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px) in the h2 element as an attribute like this (removed padding:20px from the style attribute in the div element):

<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>

But for some reason the line above gave me a different output than putting the padding:20px in the style attribute of the div element. Can someone please explain me this difference? Thank you in advance for the help!

Improve this question
0

12 Answers 12

Reset to default
15

Your syntax is full of errors.

It has to be

<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>

and yes, in short this is identical to

<h2 style="padding: 20px">London</h2>

There is also three other short forms:

/* applies 10px top/bottom, and 5px left/right */
padding: 10px 5px; 

/* applies 10px top, 0 to bottom, and 5px left/right */
padding: 10px 5px 0; 

/* applies 1px top, 2px right, 0 bottom, 4px left (clockwise, starting at top) */
padding: 1px 2px 0 4px;
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This was an extremely helpful answer. Understanding the other forms of the padding attribute really helped me out. Thank you so much for explaining those as well! Also one quick question... Is style an attribute of the h2 html element or is it just a CSS attribute?
It's a so-called universal attribute which basically means that it is available on all HTML elements. Nonetheless it's widely considered bad practice to make use of it except in some very special cases where css properties (like for example background-image) must be set dynamically. The regular way to do it is to put your styles in a css class in your css stylesheet and then apply that to your elements via the (again) universal class attribute.
Ok! That makes complete sense now. Thank you so much for the help!
@connext: There is no need for semicolon after the 'padding-left: 20px ?
@aerijman In a CSS declaration block, the ; after the last declaration may be omitted.
1

not valid 

<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>

use

h2{
    background: #ccc;
}
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

Fiddle

Improve this answer

1 Comment

Thank you so much for the help Dmitriy! I understand my mistake now!
0

Yes, padding:20px; applies the same amount of padding to all sides of your element.

Also, your HTML is incorrect. Do this:

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

Or simply,

<h2 style="padding:20px">London</h2>
Improve this answer

Comments

0

yours, h2 padding style is incorrect.

you should add style for the h2 element.

<h2 style="padding:20px">London</h2>
Improve this answer

Comments

0

If you're gonna apply padding to all sides simultaneously, you're better off just using padding:20px as a value for style since it cuts down on code size.

See this link for more examples on the use of CSS padding:

http://www.w3schools.com/css/css_padding.asp

Improve this answer

Comments

0

try this. you will know how the padding works. padding is for positioning the text/element in an element(parent)

 <div style="background-color:black;color:white;padding:20px">
    
    <h2 style="border: solid 1px red">London</h2>
    
    </div>

Improve this answer

Comments

0

Padding:20px will apply padding in all 4 directions .

You can also write this way padding:20px 20px 20px 20px; this goes like this padding : top right bottom left

SO instead or write padding-right, padding-top and other two, one can simply write padding and apply the right left top bottom padding value to it. This method is helpful when we want to apply different padding values for all directions. Like padding: 5px 10px; This will apply padding 5px in top and bottom and 10px from left right;

Also, your HTML is incorrect. Do this:

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

OR 

<h2 style="padding:20px 20px 20px 20px;">London</h2>

Or simply,

<h2 style="padding:20px;">London</h2>
Improve this answer

Comments

0

Your css syntax is incorrect

The correct syntax is:

<h2 style="padding-top=20px; padding-right=20px; padding-bottom=20px; padding-left=20px;">London</h2>

OR

<h2 style="padding=20px;">London</h2>

OR

<h2 style="padding=20px 20px 20px 20px;">London</h2>
Improve this answer

1 Comment

Seems like you have to use : instead of = inside a string. You do need = between attribute and value, since that is HTML and XML syntax.
0 
h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`
Improve this answer

Comments

0

Your syntax is totally wrong.It would be

    <h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; 
padding-left: 20px">London</h2>

Also if you want to give padding to all sides you can use as below :

<h2 style="padding: 20px;">London</h2>

Or you can also write like padding:10px 20px 30px 40px; it means padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,

Padding: 10px 20px it means padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px

Padding: 10px 30px 20px it means padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px

Improve this answer

2 Comments

Thank you so much for the help Chandresh! I understand my mistake now!
Thanks for the edit Saina! Helped out a lot to know the different forms.
0 

h2{
    background: #ccc;
}
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

Improve this answer

Comments

-1

padding:20px means you give 20px padding from top right bottom left. Do you mean padding-top, padding-right.... rather than the padding:right, padding:top etc.. cos this one is not working on mine.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.