So I have this html code:
<!DOCTYPE html> <html> <body> <div> <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!
12 Answers
Your syntax is full of errors.
It has to be
<h2>London</h2> and yes, in short this is identical to
<h2>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; not valid
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2> use
h2{ background: #ccc; }<h2>London</h2>Yes, padding:20px; applies the same amount of padding to all sides of your element.
Also, your HTML is incorrect. Do this:
<h2>London</h2> Or simply,
<h2>London</h2> yours, h2 padding style is incorrect.
you should add style for the h2 element.
<h2>London</h2> 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:
try this. you will know how the padding works. padding is for positioning the text/element in an element(parent)
<div> <h2>London</h2> </div>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>London</h2> OR
<h2>London</h2> Or simply,
<h2>London</h2> Your css syntax is incorrect
The correct syntax is:
<h2>London</h2> OR
<h2>London</h2> OR
<h2>London</h2> h2{ padding:20px;}`<h2>London</h2>` Your syntax is totally wrong.It would be
<h2>London</h2> Also if you want to give padding to all sides you can use as below :
<h2>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
h2{ background: #ccc; }<h2>London</h2>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.
