Question

所以我有这个测试网站，我正在构建，我有一个没有意义的CSS问题，因为你会看到我在下面链接的jsfiddle我有一个div组成第一个大盒子（类p1和ps ）由于某种原因，我的文本栏（类标记为COMING SOON）在顶部和底部的边距约为20px。在我的CSS中没有提到应该这样做的余量我已经经历了每一行可能十几次而且没有得到它所以我转向你们曾经多次帮助过我的人。如果你能快速看看并帮助我。非常感谢。

<body>
    <div class="header">
        <div class="header-content">
            <div class="one"><h1 class="name">Title of Site</h1></div>
            <div class="one two"><h5 class="tag">Subtext</h5></div>
        </div>
    </div>

    <div class="codepen"></div>
    <div>
        <div class="p1 ps">
            <img class="img" src="http://placehold.it/300x200" >
            <p><h3 class="tagto">COMING SOON</h3></p></div>
        <div class="p2 ps">
            <p class="c2"><h3 class="tagto">COMING SOON</h3></p></div>
        <div class="p3 ps">
            <p class="c3"><h3 class="tagto">COMING SOON</h3></p></div>

    </div>

</body>

CSS在jsfiddle中，因为这里的代码块没有正确格式化。

https://jsfiddle.net/kd2q454c/

Answer 1

保证金来自浏览器规则。设置：

p, h3 {margin:0;}

在CSS中

覆盖基于浏览器的规则。

小提琴HERE

Answer 2

由于h3上的用户代理样式表的css：

，因此存在保证金

h3 {
  display: block;
  font-size: 1.17em;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

要覆盖它，只需执行：

h3 {
    margin: 0;
}

Answer 3

您必须删除<h3>周围的包裹<div class="header"> <div class="header-content"> <div class="one"><h1 class="name">Title of Site</h1></div> <div class="one two"><h5 class="tag">Subtext</h5></div> </div> </div> <div class="codepen"></div> <div> <div class="p1 ps"> <img class="img" src="http://placehold.it/300x200" > <h3 class="tagto">COMING SOON</h3></div> <div class="p2 ps"> <h3 class="tagto">COMING SOON</h3></div> <div class="p3 ps"> <h3 class="tagto">COMING SOON</h3></div> </div>标记，以便您拥有以下代码：

.tagto

然后将margin: 0课程设为.tagto { text-align: center; background-color: yellow; width: 66%; height: 25%; line-height: 2.5em; margin: 0; /* add this line */ }

while

我有一个HTML / CSS问题，我似乎无法弄清楚（初级水平）

3 个答案: