参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的?接下来就这个问题将具体分析:1.行内元素拥有 ...
参考资料:Inline elements and padding
今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的?
接下来就这个问题将具体分析:
1.行内元素拥有盒子模型么
答案是是的。没错,行内元素跟块级元素一样,同样拥有盒子模型。
2.行内元素的padding-top,padding-bottom和margin-top,margin-bottom是否无效
答案同样是是的。盒子模型的width,height和padding-top,padding-bottom和margin-top,margin-bottom设置都是无效的。但是...
3.实战探讨行内元素的padding-top,padding-bottom和margin-top,margin-bottom
先来看两个实例:
example1:
源码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>example1</title><style type="text/css">*{ margin:0px; padding:0px; text-decoration:none; list-style:none;}#main{ min-width:1280px; background-color:pink; margin:auto; height:800px;}nav{ height:50px; background-color: #ffffff;}nav ul li{ height:50px; float:left; background-color: #ffffff;}a{ line-height:50px; padding:30px; margin:30px; background-color:green; font-size:14px; color:rgb(231,79,77);}</style></head><body><div id="main"><header> <nav> <ul> <li><a class="hnav" href="#">首页</a></li> <li><a class="hnav" href="#">最新活动</a></li> <li><a class="hnav" href="#">项目介绍</a></li> <li><a class="hnav" href="#">爱心社区</a></li> <li><a class="hnav" href="#">关于我们</a></li> </ul> </nav></header></div></body></html>
原标题:HTML中行内元素的竖直方向的padding和margin是否真的无效
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。