好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML中行内元素的竖直方向的padding和margin是否真的无效_html/css_WEB-I

参考资料: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:

源码:

     example1  *{  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);}   

首页 最新活动 项目介绍 爱心社区 关于我们

查看更多关于HTML中行内元素的竖直方向的padding和margin是否真的无效_html/css_WEB-I的详细内容...

  阅读:31次