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

参考资料：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是否真的无效-Mingjie_Zhang的详细内容...