html让上下span闲出一点空隙还有更好的方法吗?

我用的是加了两个br 让每两个span上下有间距 还有比加br更好的方法吗?

<div id="div2">
<span>javascript</span><br />
<span>javascript</span>
<br />
<br />
<span>HTML</span><br />
<span>HTML</span>
<br />
<br />
<span>css</span><br />
<span>css</span>
</div>

可以用css3的:nth-child选择器来选择奇数元素或者偶数元素。

<html>
<head>
<title></title>
<style type="text/css">
#div2 span{
display:block;
}
#div2 span:nth-child(even){
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="div2">
<span>javascript</span>
<span>javascript</span>
<span>HTML</span>
<span>HTML</span>
<span>css</span>
<span>css</span>
</div>
</body>
</html>

 其实通用一点的办法是手动指定哪些span后面的间隔大一些:

<html>
<head>
<title></title>
<style type="text/css">
#div2 span{
display:block;
}
.space {
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="div2">
<span>javascript</span>
<span class="space">javascript</span>
<span>HTML</span>
<span class="space">HTML</span>
<span>css</span>
<span>css</span>
</div>
</body>
</html>

追问

nth-child(even)这个是什么意思?

追答

是指定子元素在父元素中的顺序的选择器。
括号里面可以是数字,有两个特殊值:odd是奇数,even是偶数。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2020-04-01
<span style="display:inline-block;margin:5px;">
第2个回答  2015-08-18
<span style="display:block;margin:5 0;">hehe/span>

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网