使用边距设置跨度之间的距离答案

【问题标题】：Set distance between spans using margin使用边距设置跨度之间的距离
【发布时间】：2011-03-27 07:04:34
【问题描述】：

这是位于网页上的两个跨度（在现实生活中有很多跨度）。我想设置它们之间的距离。我想为此使用 margin-bottom 属性，但我看不到使用它的任何影响。跨度仍然在之前的位置。那是错的。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <style type="text/css">
        .position, .name{
            overflow: hidden;
        }

        .position{
            margin-bottom: 40px;
        }
    </style>
</head>
<body>
    <span class="position">Designer</span><br/>
    <span class="name">John Smith</span>
</body>
</html>

【问题讨论】：

标签： css xhtml layout margin html

【解决方案1】：

span 是内联元素，而不是块元素，它们不尊重（垂直）margin。您可以使用填充或创建跨度display:inline-block;，然后使用边距。大多数较新的浏览器现在都支持后者。

【讨论】：

当您说跨度不尊重边距时，我仅部分同意您的观点。它确实尊重边距，但只有左右。不是顶部和底部。
是的，没错，CSS2.1 specifies inline elements to respect horizontal margins。这里的问题是垂直对齐，所以边距不起作用。
我现在很着急，但是 span 上的 padding-top 对我不起作用。我最终使用了一个div。欧威尔。
它不完全尊重水平边距。自动选项不起作用

【解决方案2】：

我会说 line-height 是您正在寻找的。

【讨论】：