Question

我有以下代码：

<div class='relative'>
    <span>MyText</span><br>
    <span class="btnFavorit btnViolet" idp="005626">
            <span class="l">&nbsp;</span><span class="c"> <img class="imageOff" src="./charte/base/mesCourses/pictoFavorit.png"><img class="imageOn" src="./charte/base/mesCourses/pictoFavoritOn.png">BUTTON</span><span class="r">&nbsp;</span>
            </span>
    </span>
</div>

我想在第一个跨度上放置一个边距底部，以便在文本和我的按钮之间留一个空格（由span制作）。我怎么做（对我而言，我想我会使用其他的但我不知道我是否可以使用CSS）

Answer 1

这应该有效

.relative span { display: inline-block; }
.relative span:first-child { margin-bottom: 10px; }

Answer 2

您可以在这些跨度之间留出更多空间。您可以设置css规则来执行此操作：

br { 
line-height:10px;
}

或

br { 
margin: 15px 0;
display: block;
}

这会改变你网页中的所有brs。将类添加到br，以便只在一个地方具有css：

<span>MyText</span><br class="gap">

然后你使用css：

br.gap { 
margin: 15px 0;
display: block;
}

Answer 3

只需将类添加到第一个范围，为其显示属性inline-block或block并添加保证金： - ）

.textSpan{
    display:inline-block;
    margin-bottom:5px; /*increase if you want*/
}

为什么只有保证金不适用于span？ Span元素为inline，与p, div等块元素不同，因此您需要专门为其提供自定义显示属性，如block或inline-block

http://jsfiddle.net/wk483kzL/

Answer 4

span标记只能用于内联元素。最好的解决方案是将MyText范围更改为div，因为这是您想要的效果。

<div>MyText</div>

Answer 5

使用像这样的东西..

<style>
.relative span:first-of-type { display:inline-block;margin-bottom:10px; }
</style>

2跨度之间的差距

5 个答案: