span标签根本不起作用

Question

我有一个html文件，其中一部分如下：

<ul>
   {% for tree in tree}
         <li>   <a href="{{ url_for('fruits', tree_id=tree.id) }}">
            {{ tree.tree_name }} - {{ tree.tree_year }}
        </a> 
<span class="hyphen"> - </span>       
<a href="{{ url_for('stats', tree_id=tree.id) }}">
        stats
        </a></li>
       {% endfor %}
</ul>

和相应的.css如下：

.hyphen{ margin-left:80px; margin-right:80px }

但是span标签似乎根本没有任何效果。我想在连字符之前和之后给出空格，但它不起作用。为什么这样？

Answer 1

默认情况下，span是内联元素，内联元素不能有垂直填充/边距。

要解决这个问题，你可以做两件事， 第一个是给元素display: block，但这很可能不是你想要的，因为它是以前内联的。

然后是D4V1D所指出的display: inline-block，这将使您能够像块级元素一样设置样式。

Answer 2

添加

.hyphen {
    display: inline-block;
}

到<span>。

您无法将width，height和垂直 margin和padding属性设置为不<的元素/ strong> block元素。