<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行级标签的距离</title> <!--水平排放的盒子，两者之间的距离是累加的 垂直排放的盒子，垂直间距取最大值--> <style> #span1{ background-color: yellowgreen; } #span2{ background-color: aquamarine; } #span3{ background-color: yellowgreen; margin-right: 20px; } #span4{ background-color: aquamarine; margin-left: 50px; } #span5{ background-color: yellowgreen; margin-bottom: 20px; } #span6{ background-color: aquamarine; margin-top: 50px; } </style> </head> <body> <div> <span id="span1">你若无伤，岁月无恙1</span><span id="span2">你若无伤，岁月无恙2</span> <br/>
<!-- 水平距离：两个盒子之间的距离是70px--> <span id="span3">你若无伤，岁月无恙1</span><span id="span4">你若无伤，岁月无恙2</span> <br/>
<br/> <!--垂直距离： 两个盒子之间的距离是50px--> <div id="span5">你若无伤，岁月无恙1</div> <div id="span6">你若无伤，岁月无恙2</div>
</div> </body> </html>
扫一扫
9501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
