How To Set Equal Margins for Entire Web Page
This question may have been beaten to death, but after looking through posts and Googling the heck out of it, I cannot find a functional code to get this to work and nothing I tried is doing the trick.
I'd like to set ALL (top, left, bottom, and right) page margins to 1%, but nothing I'm doing works. The only way I can get this to work is to manually size my images using height and width properties, which I'd like to avoid.
Ideally I'd like something like this:
body, html {
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
margin-top:1%;
}
But that doesn't work. Any clean, straightforward suggestions on accomplishing this out there?
Answer
Summary
Your margins are working correct. However, page margins do not apply to position:fixed elements.
Details
This is not a glitch, but is by design according to the W3C specs. Putting a left/right/top/bottom on a fixed element will move it relative to the viewport (your window). It won't even check for margins on <body> or any other parent element. After all, position:fixed is designed so that an element stays fixed to a part of window, even when scrolling... it needs to be fully independent of other elements to behave this way.
So why did changing the 'top' and 'left' padding/margin of body seemed to work?
Because position:fixed is calculated in basically two steps:
- Lock the element at its starting position, as if it was position:static.
- If a left/right/top/bottom is found, apply that change, but leave everything else positioned the way it started.
So here's what happens on your example:
- If your
<div>s were position:static, they would start in the top-left corner, but be pushed down 1% and left 1% because of that<body>'s margin/padding. - You don't set any left/right/top/bottom on the 1st
<div>, so it stays in place permanently. - The 2nd
<div>has aright: 0on it though; and as it doesn't really care about anybody's margin/padding, it goes straight to the right edge of the window like it was born to do.
Basically, the <body> gets to indirectly affect the <div>s, but setting a right: 0; blows that all away.
Solution
Don't worry about putting padding/margin on the <body>, getting hard-to-predict results. Instead, apply CSS directly to the fixed elements. For example:
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
div.nw {
height:50%;
width:50%;
position:fixed;
top: 0;
left: 0;
background-color:#ff0;
padding: 1% 0 0 1%;
}
div.ne {
height:50%;
width: 50%;
right: 0;
top: 0;
padding: 1% 1% 0 0;
background-color:blue;
position:fixed;
}
See it in action here: http://codepen.io/anon/pen/isDhA
EDIT:
If you don't want the background color near the edges either, just combine the above technique with some simple inner divs. Such as in this example: http://codepen.io/anon/pen/lDebh
EDIT 2:
After further discussion in the comments, here's some other suggestions, depending on what you need.
"I want to have equal-sized divs in each corner of the window. It should be fixed to the background, so it doesn't scroll with everything else"
Use this approach: http://jsfiddle.net/fettj66r/9/
.corner {
position: fixed;
width: 50%;
height: 50%;
z-index: -1;
}
.nw {
background: red;
left: 1%;
top: 1%;
}
.ne {
background: green;
right: 1%;
top: 1%;
}
.sw {
background: blue;
left: 1%;
bottom: 1%;
}
.se {
background: black;
right: 1%;
bottom: 1%;
}
"I want to have equal-sized divs in each corner of the window. It should scroll with everything else."
Use this approach: http://jsfiddle.net/fettj66r/10/
body {
position: relative;
margin: 1%;
}
.corner {
position: absolute;
width: 50%;
height: 50%;
z-index: -1;
}
.nw {
background: red;
left: 0;
top: 0;
}
.ne {
background: green;
right: 0;
top: 0;
}
.sw {
background: blue;
left: 0;
bottom: 0;
}
.se {
background: black;
right: 0;
bottom: 0;
}
If you have any questions about the above techniques, or this isn't what you needed either, feel free to ask in the comments.