如何为整个网页设置相等的边距

时间:2014-10-04 02:15:42

标签: css margins

这个问题可能已经被打死了,但是在查看帖子和谷歌搜索后,我找不到一个功能代码来让它工作,我尝试的任何东西都没有做到这一点。

我想将所有(上,左,下,右)页边距设置为1%,但我没有做任何工作。我能让它工作的唯一方法是使用我想避免的高度和宽度属性手动调整图像大小。

理想情况下,我喜欢这样的事情:

body, html {
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
margin-top:1%;
}

但这并不奏效。有关实现这一目标的任何干净,直截了当的建议吗?

2 个答案:

答案 0 :(得分:1)

摘要

您的保证金正常。但是,页边距不适用于position:fixed元素。

详细

这不是故障,而是根据the W3C specs的设计。将左/右/上/下放在固定元素上将相对于视口(您的窗口)移动它。它甚至不会检查<body>或任何其他父元素的边距。毕竟,position:fixed的设计使得元素保持固定在窗口的一部分上,即使在滚动时......它也需要完全独立于其他元素才能以这种方式运行。

那么为什么要改变顶级&#39;并且&#39;离开&#39; body的填充/边距似乎有用吗?

因为position:fixed基本上分两步计算:

  1. 将元素锁定在其起始位置,就好像它是position:static。
  2. 如果找到左/右/上/下,请申请 改变了,但保留其他一切的方式 启动。
  3. 所以在这里你的例子会发生什么:

    1. 如果你的<div>是位置:静态,那么它们将从中开始 左上角,但由于这个原因,被推下1%并留下1% <body>&#39}}边距/填充。
    2. 您不会在第一个<div>设置任何左/右/上/下,所以它 永远留在原地。
    3. 第二个<div>上有一个right: 0;并且因为它没有 真的关心任何人的边距/填充,它会像天生就一样直接进入窗口的右边缘。
    4. 基本上,<body>会间接地影响<div>,但设置right: 0;会让所有人感到震惊。

      解决方案

      不要担心在<body>上添加填充/边距,从而获得难以预测的结果。而是将CSS直接应用于固定元素。例如:

      * {
          -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;
      }
      

      在此处查看此行动:http://codepen.io/anon/pen/isDhA

      修改

      如果你不想要靠近边缘的背景颜色,只需将上述技术与一些简单的内部div结合起来。例如:http://codepen.io/anon/pen/lDebh

      编辑2:

      在评论中进一步讨论后,根据您的需要,提供其他一些建议。

      &#34;我想在窗口的每个角落都有相同大小的div。它应该固定在背景中,因此它不会滚动其他所有内容&#34;

      使用此方法: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%;
      }
      

      &#34;我想在窗口的每个角落都有相同大小的div。它应滚动其他所有内容。&#34;

      使用此方法: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;
      }
      

      如果您对上述技术有任何疑问,或者这不是您所需要的,请随时在评论中提问。

答案 1 :(得分:0)

DEMO

body, html {
    margin-left:1%;
    margin-right:1%;
    margin-bottom:1%;
    margin-top:1%;
    width:98%;
    height:98%;
}

用于设置高度边距,您必须设置高度