首页 > 建站教程 > Div+Css >  html内嵌标签(内联标签,inline标签,行内标签)的margin和padding总结正文

html内嵌标签(内联标签,inline标签,行内标签)的margin和padding总结

我们都知道,整行标签(块状标签,block标签)的margin和padding,但是内嵌标签(内联标签,inline标签,行内标签)有的支持,有的不支持,有的支持部分。我爱模板网闲来无事,测试了大部分html标签,并且记了下。这里分享给需要的朋友(块状标签和不可见标签,如<html>,我爱模板网就没有测试了):

注意:下面的截图是火狐下面的firebug,淡蓝色代表标签内容,紫色代表padding,黄色代表margin,暗红色代表border
        
<u></u> 下划线标签,代码如下:
<style>
*{margin:0px; padding:0px}
u{margin:20px; padding:20px; border:5px solid red;}
</style>
<br />
<br />
<br />
上面的文字上面的文字上面的文字上面的文字上面的文字上面的文字上面的文字上面的文字上面的文字
<br />
左边的文字<u>测试文字</u>右边的文字
<br />
下面的文字下面的文字下面的文字下面的文字下面的文字下面的文字下面的文字下面的文字下面的文字
经测试:在火狐下,u标签的margin、padding起作用,但是margin-top、margin-bottom和padding-top、padding-bottom并不能把上下的距离拉开。如下图:

内嵌标签的margin和padding测试

测了大概二十个内嵌标签,发现效果都和u一样,所以,我爱模板网觉得没必要测下去了,至少常用的内嵌标签,表现都和u一样。

总结:大部分(因为没有测试完)内嵌标签,都支持margin和padding,但是margin-top、margin-bottom和padding-top、padding-bottom并不能把上下的距离拉开,却可以起把自己的border撑开。