CSS/HTML中的空白-堆栈溢出

顺晟科技

2022-10-19 12:59:26

105

我有一个测试文件，其中页眉和页脚div的顶部有空白。这是因为DIV没有定义的边框吗？如果我确实添加了边框，并将其颜色与DIV背景相同，则空白将被更正。如果我也移除页眉和页脚中这些元素的上边距，问题就会消失。

但是，我认为如果我添加了相对于那些容器的位置，那么像默认边距这样的元素属性将相对于容器而不是主体。

如有任何帮助，不胜感激。谢谢

顺晟科技：

这是因为标题h1和h2标记在CSS下面使用的默认边距

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Div Testing</title>

  <style>
    body {
      margin: 0%;
      padding: 0%;
    }
    
    h1 {
      text-align: center;
    }
    
    p {
      text-align: justify;
      padding: 25px;
    }
    
    .header-container {
      position: relative;
    }
    
    .header {
      display: block;
      height: 150px;
      background-color: rgb(206, 231, 233);
    }
    
    .div1 {
      display: block;
      float: left;
      width: 33.33%;
      /* border-style: solid;
                border-width: 1px; */
      background-color: #9fc9cd;
    }
    
    .div2 {
      display: block;
      float: left;
      width: 33.33%;
      /* border-style: solid;
                border-width: 1px; */
      background-color: #ffecc5;
    }
    
    .div3 {
      display: block;
      float: left;
      width: 33.33%;
      /* border-style: solid;
                border-width: 1px; */
      background-color: #ffc8c5;
    }
    
    .clear {
      clear: both;
    }
    
    .footer {
      display: block;
      position: relative;
      text-align: center;
      height: 100px;
      background-color: #689fa4;
    }
    
    #footer-h2 {
      position: relative;
      top: 25px;
    }
  </style>
</head>

<body>
  <div class="header-container">
    <div class="header">
      <h1>Title Here!</h1>
    </div>
  </div>
  <div class="div1">
    <h1>Header inside div 1</h1>
    <p>
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
      one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
      Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
      in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied
      by English versions from the 1914 translation by H. Rackham.
    </p>
  </div>
  <div class="div2">
    <h1>header inside div 2</h1>
    <p>
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
      one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
      Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
      in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied
      by English versions from the 1914 translation by H. Rackham.
    </p>
  </div>
  <div class="div3">
    <h1>header in div 3</h1>
    <p>
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
      one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
      Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
      in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied
      by English versions from the 1914 translation by H. Rackham.
    </p>
  </div>

  <div class="clear"></div>

  <div class="footer">
    <h2 id="footer-h2">This is the footer</h2>
  </div>
</body>

</html>

还有一个建议，请使用flexbox而不是float，因为flexbox也可以处理响应设计

上一篇：JavaScript-GULP不运行下一篇：JavaScript-如果其中一个复

网站建设

Html

CSS/HTML中的空白-堆栈溢出