Problem with padding

Hi, I have almost completed my CSS but still i think i lack of CSS knowledge. (sorry for bad grammar) I made a simple box with html and css, the problem I am facing is when i add padding on top inside the box it automatically adds padding of same px on bottom also and i cannot remove it. How can i fix this ? My Code It: --------------------------------HTML--------------------------------- <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p class="clip">Background-Clip</p> </body> </html> --------------------------------CSS----------------------------------- body { padding:0px; margin: 0px; } .clip { color: black; width: 150; height: 100; border: 2px solid black; padding-top: 50px; }

css padding error problem question help word-space

8th Feb 2017, 12:49 PM

Hussain Mohammed

2 Answers

+ 3

You can use long name specific properties: padding-left:10px; padding-right:0; padding-top:5px; padding-bottom:25px; ... as you can give multi values to the shorthand 'padding' property: padding:5px 0 25px 10px; /* 4 value order: top, right, bottom, left */ With 2 values, order is vertical, horizontal ( top and bottom, left and right ). With 3 values, order is top, horizontal, bottom ( top, left and right, bottom ).

8th Feb 2017, 1:10 PM

visph