div中所有h标签下方的空白区域

Question

这是我的问题https://jsfiddle.net/d20fo54o/

的JSfiddle

h3标签下面的空格不会消失。我尝试过填充0，边距0，并查找它。

它也不是它下面的div，因为如果你删除了另一个div并用其他任何东西替换它，那么空间仍然存在。

＆＃13;

＆＃13;

HighlightJPanelsContainerMouseListener

＆＃13;

div {
  background-color: #1D62F0;
  border-radius: 20px;
  text-align: center;
  width: 600px;
  margin: 0 auto;
}
div #list {
  background-color: white;
  width: 100%;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
div #title {
  color: white;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加h3, p { margin: 0 }。工作得很好，看小提琴

https://jsfiddle.net/d20fo54o/1/

Answer 2

为margin:0;和p

添加h3

＆＃13;

＆＃13;

div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto; 
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;    
}
div #title {
color: white;
}
h3, p{
  margin:0;
  }

＆＃13;

 <div>
        <h3 id='title'>Hello</h3>
        <div id='list'>
            <p>hello</p>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在chrome dev tools中，您可以看到边距（桃色位）如何影响整个页面。

在这张图片中，我们可以看到h3#title有一个边距 - 底部（因为它是底部的边距）正越过蓝色位，所以我们可以说。

h3#title {
  margin-bottom: 0px;
}

这将删除标题Hello下面的位，但是还有另一个边距（此时为margin-top，因为它位于顶部的边缘），这看起来会影响该区域，这次它是{{ {1}}这导致了问题，我们可以做类似的事情。

p

全部放在一起

现在让我们将我们已经解决的一些代码放到你的CSS中。

＆＃13;

＆＃13;

p {
  margin-top: 0px;
}

＆＃13;

div {
  background-color: #1D62F0;
  border-radius: 20px;
  text-align: center;
  width: 600px;
  margin: 0 auto;
}
div #list {
  background-color: white;
  width: 100%;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
div #title {
  color: white;
}

/* our new code */
h3#title {
  margin-bottom: 0px;
}
p {
  margin-top: 0px;
}

＆＃13;

＆＃13;

＆＃13;

然后我们走了，讨厌的边缘消失了，额外的间距也消失了。

希望这有帮助。