Question

我是网页设计的新手，我希望通过CSS在两个<div>之间找到烦人的空间： Annoying space between (in the red circle)

我正在使用此代码：

HTML：

<html>
<head>
    <link rel="stylesheet" href="../css/index.css">
    <title> FalquOS: Index </title>
</head>
<body>
    <div id="Section1">
        <p> Section 01 </p>
    </div>
    <div id="Section2">
        <p> Section 02 </p>
    </div>
    <div id="Section3">
        <p> Section 03 </p>
    </div>      
    <script src="../js/index.js"></script>
</body>

和CSS：

   #Section1 {
        width: 100%;
        height: 500px;  
        background: #ff7f29;
        border-radius: 10px 10px 0px 0px;
    }

    #Section2 {
        width: 100%;
        height: 500px;
        background: #f3dc4f;    
    }

    #Section3 {
        width: 100%;
        height: 500px;
        background: #f34f4f;
        border-radius: 0px 0px 10px 10px;   
    }
    p {
        text-align: center;
        font-size: 25px;
        color: white;
        position: relative;
        top: 200px;
        font-family: monospace;
    }

我一直在尝试可能有助于保证金的事情，但这不起作用：（

Answer 1

对于display:block，它仍然会考虑来自其中的margin-top个孩子p

默认情况下，
<p>有margin-top:1em和margin-bottom:1em

我的例子中有什么？

我在Section 2进行了一些修改，看看它，我确定你会明白margin-top如何创建恼人的空间。

＆＃13;

var up = true;
var value = 20;
var increment = 10;
var ceiling = 500;

function PerformCalc() {
  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
    up = false
    value -= increment;

    if (value == 0) {
      up = true;
    }
  }

  document.getElementById('Section1').style.height = value + 'px';
  document.getElementById('Section2').style.height = value + 'px';
  document.getElementById('Section3').style.height = value + 'px';
}
setInterval(PerformCalc, 100);

＆＃13;

body {
  background: grey;
}

#Section1 {
  display: block;
  width: 100%;
  background: #ff7f29;
  border-radius: 10px 10px 0px 0px;
}

#Section2 {
  width: 100%;
  background: #f23;
  border-radius: 10px 10px 0px 0px;
  color: white;
  font-family: monospace;
  font-size: 25px;
  text-align: center;
}

small {
  font-size: 25px;
  /* ;) */
  display: block;
  position: relative;
  top: 200px;
}

#Section3 {
  width: 100%;
  background: #8f7;
  border-radius: 10px 10px 0px 0px;
}

p {
  text-align: center;
  font-size: 25px;
  color: white;
  position: relative;
  top: 200px;
  font-family: monospace;
}

＆＃13;

<body>
  <div id="Section1" class="no-margin">
    <p> Section 01 </p>
  </div>
  <div id="Section2">
    <small>Section 02</small>
  </div>
  <div id="Section3">
    <p> Section 03 </p>
  </div>
  <!--     <script src="../js/index.js"></script> -->
</body>

＆＃13;

Answer 2

编辑：现在您添加了代码

使用className="section"为您的部分添加一个类，并创建一个新的CSS类，删除边距：

.section { margin: 0 };

正如其他人所说，它也可以是p元素，所以你也可以通过写（在这种情况下）来删除那个边距

.section p { margin: 0 };定位p

中的.section元素

在设置部分样式的CSS文件中，删除边距：margin: 0;并填充padding: 0;。 Margin用于添加各个部分之间的距离，padding用作＆＃34;间距＆＃34;在该部分内。

所有HTML元素都可以视为框。在CSS中，术语＆＃34;框模型＆＃34;在谈论设计和布局时使用。

在W3 Schools上阅读有关Box模型的更多信息。

小注意：您应该在问题中添加相关代码，以便更方便地为您提供帮助。

Css - 摆脱对象之间令人讨厌的空间

2 个答案: