有人可以告诉我我编码错误吗?一切正常,唯一的是顶部没有裕度。
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; }
不同于div,p 1是可以在所有面上使用的块级元素margin,span2不能那样,因为它是仅在水平方向上占用边距的Inline元素。
div
p
margin
span
从规格:
边距属性指定框的边距区域的宽度。’margin’速记属性设置所有四个边的边距,而其他margin属性仅设置它们各自的边。这些属性适用于所有元素,但是垂直边距对未替换的嵌入式元素不会有任何影响。
演示1(垂直margin不施加为span是一个inline元件)
inline
解?制作您的span元素,display: inline-block;或display: block;。
display: inline-block;
display: block;
建议您使用display: inline-block;它,因为它inline也一样block。使得它block只会导致你的元素将_另一条线路上_,作为block级元素采取100%在页面上的横向空间,除非它们是由inline- block或者他们floated来left或right。
block
100%
inline- block
floated
left
right
1. 块级元素-MDN源
2. 内联元素-MDN资源