保证金顶部不适用于span元素?

有人能告诉我我编码错了吗? 一切正常,唯一的事情就是没有任何保证金。

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; } 

不同于divp 1是块级元素,它可以占用所有边上的margin ,因此span 2不能是因为它是仅在水平占用余量的Inline元素。

从规格 :

保证金属性指定框的边距区域的宽度。 “保证金”速记属性设定了所有四方的保证金,而其他保证金属性仅设置它们各自的一方。 这些属性适用于所有元素,但垂直边距不会对未replace的内联元素产生任何影响。

演示1 (不适用作为span纵向margininline元素)

解? 使你的span元素, display: inline-block;display: block;

演示2

build议你使用display: inline-block; 因为它将inline以及block 。 只将block设为block会导致元素在另一行上呈现,因为block级元素占据页面上100%的水平空间,除非它们被制成inline-block或者它们floatedleftright


1. 块级元素 – MDN源

2. 内联元素 – MDN资源

看起来你错过了一些select,尝试添加:

 position: relative; top: 25px; 

span是不支持垂直边距的内联元素。 把边缘,而不是外侧的div

span元素display:inline; 默认情况下,你需要使它inline-blockblock

改变你的CSS是这样的

 span.first_title { margin-top: 20px; margin-left: 12px; font-weight: bold; font-size:24px; color: #221461; /*The change*/ display:inline-block; /*or display:block;*/ }