你的位置:首页 > 软件开发 > 网页设计 > HTML中行内元素的竖直方向的padding和margin是否真的无效

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

发布时间:2016-04-10 12:00:04
参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的?接下来就这个问题将具体分析:1.行内元素拥有 ...

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

参考资料: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 (#换成@)。