Margin-Top不适用于跨度元素？ [英] Margin-Top not working for span element?

问题描述

有人能告诉我我编码错了什么？一切正常，唯一的是在顶部没有页边。

HTML ：

 < div id =contact_us> <！ -  BEGIN CONTACT US  - > 
< span class =first_title>联系< / span>< span class =second_title>我们< / span> 
 
< p class =content>对于任何问题，请通过以下电子邮件地址与我们联系：
< / p> < / br>< / br> 
< p class =e-mail> [e-mail]< / p>< / br>< / br>< / br>< / br> 
 
 
 
< p class =read_more> < a href =underconstruction.html>阅读更多< / a> < / p> 
< / div> <！ -  END联系我们 - > 
  

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 ¹ ，其中阻止级别元素，所有元素可以占用 margin ， span ² 不能作为内联

从规范：

边距属性指定框边距区域的宽度。
'margin'速记属性设置所有四个边的保证金，而
的其他保证金属性设置他们各自的边。这些
属性适用于所有元素，但是垂直边距不会对未替换的内联元素有任何影响。$ / b>

演示1 （垂直 margin 未应用为 span 是 inline 元素）

使您的 span 元素， display：inline-block; 或 display：block; code>。

演示2

建议您使用 display：inline-block; ，因为它将是 inline 以及块。使它阻止只会导致您的元素在另一行上呈现 em> ，因为块级元素占据页面上的水平空间的 100％ inline-block 或者浮动到 left right 。

---

^{块级元素 - MDN来源}

^{2。 内嵌元素 - MDN资源}

Can someone tell me what I coded wrong? Everything is working, the only thing is that there is no margin at the top.

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"> [e-mail] </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;
}

解决方案

Unlike div, p ¹ which are Block Level elements which can take up margin on all sides,span² cannot as it's an Inline element which takes up margins horizontally only.

From the specification :

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

Demo 1 (Vertical margin not applied as span is an inline element)

Solution? Make your span element, display: inline-block; or display: block;.

Demo 2

Would suggest you to use display: inline-block; as it will be inline as well as block. Making it block only will result your element to render on another line, as block level elements take 100% of horizontal space on the page, unless they are made inline-block or they are floated to left or right.

---

^{1. Block Level Elements - MDN Source}

^{2. Inline Elements - MDN Resource}

这篇关于Margin-Top不适用于跨度元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！