时间戳

首页 > 解决方案 > 为什么填充和边距不起作用？

html - 为什么填充和边距不起作用？

问题描述

我有以下html页面：

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .box {
      height: 100%;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>
</body>

</html>

如您所见，虽然body设置为：

  margin: 0;
  padding: 0;

标签： htmlcss

解决方案

这是由于利润率下降。

本质上，p 边距与父div边距（然后再次与body边距）相结合，以推动body向下。

有（至少）3种方法可以解决这个问题：

  1. margin-top从 中删除p，这具有删除所有 p标签的边距的负面影响。
  2. 向容器 ( )添加border-top或，这会产生添加您可能不想要的填充或边框的负面影响。padding-top.box
  3. 将overflow: [something]诸如添加overflow: hidden到.box容器中，这可能会以不希望的方式改变溢出。

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      height: 100%;
    }
    
    body {
      margin: 0;
      height: 100%;
    }
    
    .box {
      /* padding-top on the container is one solution */
      padding-top: 1px;
      height: 100%;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>
</body>

</html>

推荐阅读