首页 > > 网页制作 > css >

margin与padding大比拼

2018-06-24 00:33:07来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

用margin还是用padding这个问题相信是每个学css的人都想要去深入了解的。

CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。——CSS权威指南

使用简写的外边距属性同时改变所有的外边距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

并且规范还提供了省略的数值写法，基本如下：

1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;

在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。

同样的，padding也有上述相似的方法对上、右、下、左内边距进行设置。

这里补充一个知识点：外边距合并

含义：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

关于什么时候用margin什么时候用padding，众说纷纭。而且margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的：

何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

举例如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        padding:0px;
        margin:0px;
        font-family:微软雅黑;
    }
    .top{
        width:160px;
        height:50px;
        background-color:red;
    }
    .middle{
        width:160px;
        background-color:lawngreen;
        border-top:3px solid purple;
    }
    .m_top{
        margin-top:30px;
    }
    .m_bottom{
        margin-top:15px;
    }
</style>
<body>
<div class="top"></div>
<div class="middle">
    <div class="m_top">我是firstchild,我想与我的父元素隔开点距离，这样我会舒服些。</div>
    <div class="m_bottom">我是secondchild,我想与哥哥隔开点距离，我也想有点自己的空间，如果能与底边有点距离就更好了。</div>
</div>
</body>
</html>

上面这个效果看起来很不错，达到了我们需要实现的目标。然而，我们细细查看下这个代码，对照下我们上文所说的规则，m-top用了margin-top:30px来隔开父元素与他的距离，m-bottom也用margin-top:15px来隔开他与m-top的距离，咋看之下挺符合我们所说的margin是用来隔开元素与元素的间距。但是他符合我们所说的margin用于布局分开元素使元素与元素互不相干吗？

这里我想说的是NO，m-top同middle属于一种父子元素关系，又是一种包裹元素与内容的关系，他们之间从拟人化的角度来讲，不应该是老死不相干的局面。我们再来看我们为什么要让m-top与他的父元素隔开的距离，从表现的角度上来看，文字与边靠的太近，肯定不好看。让文字与元素边隔开的距离，既美观，又使得文字有了足够的“呼吸空间”，方便阅读，这恰恰符合padding用于元素与内容之间的间隔让内容（文字）与（包裹）元素之间有个“呼吸距离”。

我们再来看，m-top使用margin-top引发了垂直外边距合并的隐患，middle如果不加一个类似border-top:3px solid purple的话标准浏览器下就会呈现子元素顶了父元素margin隐患。可见这个时候margin显然不是很好的选择。

我们来试着这么修改：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        padding:0px;
        margin:0px;
        font-family:微软雅黑;
    }
    .top{
        width:160px;
        height:50px;
        background-color:red;
    }
    .middle{
        width:160px;
        background-color:lawngreen;
         padding:30px 0px;
    }
    .m_top{  }
    .m_bottom{
        margin-top:15px;
    }
</style>
<body>
<div class="top"></div>
<div class="middle">
    <div class="m_top">我是firstchild,我想与我的父元素隔开点距离，这样我会舒服些。</div>
    <div class="m_bottom">我是secondchild,我想与哥哥隔开点距离，我也想有点自己的空间，如果能与
    底边有点距离就更好了。</div>
</div>
</body>
</html>

我们来看看这么写的好处吧：
1.外观依旧良好，结构清晰也没有破坏布局。
2.不会产生垂直外边距合并这样的问题。
3.书写规范、代码量减少、重用性好。

我们可以看到在middle中去除了不需要的border-top，改为更为实用的padding:30px 0，让middle中的内容有了足够的“呼吸空间”，以后还可以随时随地修改这个padding，让内容文字的“呼吸空间”增大或者缩小，随时随地只修改一个middle的padding就能搞定所有包裹元素与内部内容的规划。

请注意这里是父元素应用padding，使得与其内容产生间隙，这是符合我们翻译为“补白”精髓（所以我一直喜欢称padding为“补白”而不是内边距），而padding也恰恰是在这儿最能体检他的价值。这个例子把第一个元素的margin-top去除，在父元素中应用padding。反过来，你会想，既然margin-top不好用，那么我第一个元素用padding-top不是也能达到效果么。恭喜你，你已经前进了一步了，的确使用padding-top即让第一元素与外包裹元素产生了呼吸距离，而且也不会出现所谓的垂直外边距重叠问题， 但是我依旧不推荐你这么做。为什么呢？我们来设想这么一个情况吧，假如有一天，你这个模块要产生变动，新需求要删除这个m_top，替换为m_other，会怎么样呢？

新的需求要求我们新加一个m_other，替换原来的m_top：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        padding:0px;
        margin:0px;
        font-family:微软雅黑;
    }
    .top{
        width:160px;
        height:50px;
        background-color:red;
    }
    .middle{
        width:160px;
        background-color:lawngreen;
    }
    .m_other{ }
    .m_bottom{
        margin-top:15px;
    }
</style>
<body>
<div class="top"></div>
<div class="middle">
    <div class="m_other">我是firstchild,我想与我的父元素隔开点距离，这样我会舒服些。</div>
    <div class="m_bottom">我是secondchild,我想与哥哥隔开点距离，我也想有点自己的空间，如果能与
    底边有点距离就更好了。</div>
</div>
</body>
</html>

发现问题了么？如果你把原先的m_top给删除掉了，新来的元素根本就没有定义上边距或者上补白，那么他就会自然顶在头部，不是理想的效果。的确，你可以为了他新写一个css来让他距离头部多一点空隙，但是你该怎么写？直接改m_other吗？如果其他页面里面也有m_other那么你会把其他地方的m_other布局打乱。恩，那么我用.middle .m_other{padding-top:10px;}怎么样可以吧。恩，可以可以，可是你不觉得这么累吗？每次修改，都要增加这一个多余的代码就为了简简单单的隔开点距离，久而久之，你的css文件代码会臃肿不堪，可移植性大大削弱。

每次开发的时候我一直对自己讲，你写的代码总有一天会被别的开发人员所替换、修改、更新。而一个优秀的前端写出的css不但在现在结构坚固并且还能为日后的开发人员提供方便。修改我的代码，改前改后的式样位置都一样，让之后的开发人员根本上避免接触到再次“修复”开发的机会，那才是一名真正前端的追求。这里你把包裹的div类似“封装”好一个环境，而且这个div内已经留有足够的内容的“呼吸空间”，你只需要改内容，内容所要考虑到得位置边距问题，外包的div元素早已经帮你预留好了，你用起来方便，今后改起来也方便，直接找到middle修改padding即可。

最终优化：

一般在父元素中使用padding，这样父元素和子元素之间就会留白，避免元素紧挨着边框，影响美观，在棉花派里面经常用到。不过这里有个问题，还是上面那个例子，稍微改下css代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        padding:0px;
        margin:0px;
        font-family:微软雅黑;
    }
    .top{
        width:160px;
        height:50px;
        background-color:red;
    }
    .middle{
        width:160px;
        background-color:lawngreen;
         padding:30px;
    }
    .m_top{ }
    .m_bottom{
        margin-top:15px;
    }
</style>
<body>
<div class="top"></div>
<div class="middle">
    <div class="m_top">我是firstchild,我想与我的父元素隔开点距离，这样我会舒服些。</div>
    <!--<div class="m_other">我是firstchild,我想与我的父元素隔开点距离，这样我会舒服些。</div>-->
    <div class="m_bottom">我是secondchild,我想与哥哥隔开点距离，我也想有点自己的空间，如果能与
    底边有点距离就更好了。</div>
</div>
</body>
</html>

如果想改变这个结果，让它看起来更自然，只需要改下middle的样式，如下：

.middle{  width:100px;  background-color:lawngreen;  padding:30px;  }


			   
			   

                       标签：
                   

                   
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 

			   


               

                   
上一篇：写过的HTML标签（一） 

                   
下一篇：CSS对齐 

               

               

                   

                       相关文章
                   

                   

                       

                           
                       

                   

               

           

            

			
IDC资讯：
			
			主机资讯
			
			注册资讯
			
			托管资讯
			
			vps资讯
			
			网站建设
			
			
网站运营：
			
			建站经验
			
			策划盈利
			
			搜索优化
			
			网站推广
			
			免费资源
			
			
网站联盟：
			
			联盟新闻
			
			联盟介绍
			
			联盟点评
			
			网赚技巧
			
			
行业资讯：
			
			搜索引擎
			
			网络游戏
			
			电子商务
			
			广告传媒
			
			
网络编程：
			
			Asp.Net编程
			
			Asp编程
			
			Php编程
			
			Xml编程
			
			Access
			
			Mssql
			
			Mysql
			
			其它
			
			
服务器技术：
			
			Web服务器
			
			Ftp服务器
			
			Mail服务器
			
			Dns服务器
			
			安全防护
			
			
软件技巧：
			
			其它软件
			
			Word
			
			Excel
			
			Powerpoint
			
			Ghost
			
			Vista
			
			QQ空间
			
			QQ
			
			FlashGet
			
			迅雷
			
			
网页制作：
			
			FrontPages
			
			Dreamweaver
			
			Javascript
			
			css
			
			photoshop
			
			fireworks
			
			Flash
			
			
程序设计：
			
			Java技术
			
			C/C++
			
			VB
			
			delphi
			
			
网络知识：
			
			网络协议
			
			网络安全
			
			网络管理
			
			组网方案
			
			Cisco技术
			
			
操作系统：
			
			Win2000
			
			WinXP
			
			Win2003
			
			Mac OS
			
			Linux
			
			FreeBSD
			
			

			

        

        

              

                
            

            

                
热门词条

                

				
				

            

            

                
最新资讯

                

                    
                

            

            

                
热门关注

                

                    
                

            

            

                
热门标签