<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">span{/* 行内元素margin上下被忽略 */margin-top: 50px;margin-bottom: 100px;/* 行内元素margin左右不能使用auto,可以使用具体数值 */margin-left: auto;margin-left: 50px;border: 3px solid #000000;}div{margin-top: 30px;margin-left: 500px;border: 3px solid #000000;}/* 块级元素转为行级元素与行级元素相同 */#div1{display: inline;}/* 行内元素转为块级元素或行内块级元素可以在正常使用margin */#span2{display: block;}#span3{margin-top: 200px;display: inline-block;}/* 两个元素margin共同的部分不叠加，以最大的为准 */#div2{margin-bottom: 50px;}#div3{margin-top: 50px;}</style></head><body><span id="span1">你挑着担，我牵着马</span><span id="span2">迎来日出又送走晚霞</span><hr><span id="span3">敢问路在何方</span><div id="div1">路在脚下</div><hr ><div id="div2">刚翻过几座山</div><div id="div3">又降住几个魔</div></body></html>
