有人可以告诉我我编码错了什么吗?一切正常,唯一的问题是顶部没有边距。
HTML :
<div id="contact_us"> <!-- BEGIN CONTACT US -->
<span class="first_title">Contact</span>
<span class="second_title">Us</span>
<p class="content">For any questions whatsoever please contact us through the following e-mail address:</p></br></br>
<p class="e-mail">info@e-mail.com</p></br></br></br></br>
<p class="read_more"><a href="underconstruction.html">Read More</a></p>
</div> <!-- END CONTACT US -->
CSS :
span.first_title {
margin-top: 20px;
margin-left: 12px;
font-weight: bold;
font-size: 24px;
color: #221461;
}
span.second_title {
margin-top: 20px;
font-weight: bold;
font-size: 24px;
color: #b8b2d4;
}
原文由 user1548544 发布,翻译遵循 CC BY-SA 4.0 许可协议
Unlike
div
,p
1 which are Block Level elements which can take upmargin
on all sides,span
2 cannot as it’s an Inline 仅在水平方向占据边距的元素。从 规格:
演示 1 (垂直
margin
未应用为span
是inline
元素)解决方案?制作你的
span
元素,display: inline-block;
或display: block;
。演示 2
建议您使用
display: inline-block;
因为它将是inline
以及block
。制作它block
只会导致你的元素 在另一行 上呈现,因为block
水平元素采用100%
,除非它们在页面上制作水平空间--inline-block
或者它们是floated
到left
或者right
.块级元素- MDN 源
内联元素- MDN 资源