I am working on a webpage with an embedded javascript web app and the styling on that has messed up the padding on my web page. I would like to add padding around all the contents of the page so they are not completely pressed against the edge but nothing I seem to be doing is working. First i tried encompassing all the contents in the body with a div and adding CSS padding to that div but nothing. Then I tried adding padding to the body in the CSS file but nothing. Finally I tried *{ padding: 10, 10, 10, 10 px; } but still nothing. Any idea on how to add padding around all the contents of a webpage?
Asked
Active
Viewed 1,839 times
-2
2 Answers
2
Simple-
*{
padding:5% /* or whatever */
}
Note- this is far from ideal. Better to use a full reset and amend accordingly. Eric Meyer's is fairly easy to decipher
Your syntax is wrong too, its *{padding: 10px 10px 10px 10px;}, no commas
AMEND FOR APPARENT OP USE -
body{
padding: 10px;
}
ggdx
- 2,672
- 4
- 28
- 45
-
Not exactly what the OP is looking for. I can understand the confusion but he wants padding on the `body` only. – Paulie_D Jul 10 '14 at 14:45
-
Ahh. Ok, amended... Thanks @Paulie_D – ggdx Jul 10 '14 at 14:45
-
I don't think this is the best solution because every object (such as buttons and text) received padding and that really messed things up. – Doug Jul 10 '14 at 14:48
-
Hence "far from ideal..." and amendment point. – ggdx Jul 10 '14 at 14:50
1
10 is an invalid value for padding. You're probably looking for px or %. Also, adding padding to * will add padding to every single element on the page, not just around the "edge" of the page.
body{
padding: 10px;
}
Mooseman
- 18,150
- 12
- 67
- 91
-
Might want to add `box-sizing: border-box;` to that too if you notice a horizontal scrollbar. – Aibrean Jul 10 '14 at 14:46
-
@Aibrean That's OT, but yes. [Here's a good article](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) on that. – Mooseman Jul 10 '14 at 14:50