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

Posted 2023-03-06

技术标签:

【中文标题】使用边距设置跨度之间的距离【英文标题】：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>

【问题讨论】：

【参考方案1】：

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

【讨论】：

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

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

【讨论】：

以上是关于使用边距设置跨度之间的距离的主要内容，如果未能解决你的问题，请参考以下文章

PS中如何将图像与边距修改成特定的距离

使用 Bourbon Neat 删除跨度列上的边距