234

有人可以告诉我我编码错误吗？一切正常，唯一的问题是顶部没有边距。

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

6 回答 6

368

与1div不同，它是可以占据所有边的块级元素， 2不能，因为它是仅水平占据边距的内联元素。p marginspan

从规范：

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

演示 1（垂直margin不作为span元素inline应用）

解决方案？制作你的span元素，display: inline-block;或display: block;.

演示 2

建议您使用display: inline-block;，因为它会inline和block. 只制作它block会导致您的元素在另一行上渲染，因为block水平元素会占用100%页面上的水平空间，除非它们是制作的inline-block或它们是floated或left的right。

1.块级元素- MDN Source

2.内联元素- MDN 资源

于 2012-07-28T12:25:01.763 回答
90

看起来您错过了一些选项，请尝试添加：

position: relative;
top: 25px;
于 2015-08-11T18:53:17.403 回答
11

span是不支持垂直边距的内联元素。把边距放在外面div。

于 2012-07-28T12:24:11.827 回答
11

spandisplay:inline;默认情况下，您需要制作元素，inline-block或者block

将您的 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;*/
}
于 2014-10-17T05:23:34.773 回答
3

永远记住一件事：我们不能将边距垂直应用于内联元素。如果要应用垂直边距，请将其显示类型更改为block或inline-block

span {
    display: inline-block;
}
于 2018-03-16T16:11:00.883 回答
1

<span>tag 不接受 margin,padding你需要添加一些 css 样式并将你的<span>标签设置为blockorinline-block才能使用margin, paddingfor<span>标签，但最好的使用方式是divtag

span{ display:inline-block or block;}
于 2021-09-08T17:14:54.027 回答