CSS教程：详解margin和padding

2016-02-19 17:24 5 1 收藏

下面图老师小编要跟大家分享CSS教程：详解margin和padding，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！

【 tulaoshi.com - Web开发】

　　何时应当使用margin

　　需要在border外侧添加空白时。　

　　空白处不需要背景（色）时。　

　　上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

　　何时应当时用padding

　　需要在border内测添加空白时。　

　　空白处需要背景（色）时。　

　　上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

　　浏览器兼容性问题

　　在IE 5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

来源:http://www.tulaoshi.com/n/20160219/1615122.html

看过《CSS教程：详解margin和padding》的人还看了以下文章更多>>

CSS教程：详解margin和padding 02-19
CSS基础教程:margin和padding 02-19
css padding 与margin的区别 02-19
CSS模型教程:boxes,borderes,margins和padding 02-20
CSS教程:Firefox浏览器下margin-top问题 02-20
CSS教程:详解CSS特定值 02-20
css(div+span)padding的使用 02-19
CSS教程:元素详解 02-19
css教程:css和document 02-19
CSS教程：详解CSS3 Media Queries 02-17

css教程：CSS3 Media Queries 详解

标签： Web开发

说起CSS3的新特性，就不得不提到 Media Queries 。本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过...

CSS网页布局问题:li上多出的margin问题

标签： Web开发

不知道大家知道这个问题不，在ie6的情况。假如ul中的li被设置了浮动，而ul本身有设置padding-top.你会发现li无端端多出了根ul的padding-top一样宽的margin-top(在浮动的li元素的数目已使分行的时候出现)。解决方法： 1.请不要设置ul的padding，可以用margin代替，实在不行只能嵌套解决。 2.给ul设置zoom:1;overflow:hidden 3.设置ul的...

CSS基础知识:padding与line-height的区别

标签： Web开发

有朋友提出一个问题，padding与line-height的区别。这是CSS基础知识，对盒模型知识与布局以及相关属性不是很了解的时候，是很容易混淆与分不清楚的。其实padding是布局设置，对容器进行内边距定义。而line-height是行距设置，设置对象（如文本）的行高。 padding 是内补丁也叫内边距，也称为填充检索或设置对象四边的补丁边距...

CSS元素详解

标签： Web开发

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想...

CSS教程:CSS盒模型实例学习和理解

标签： Web开发

自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层div。盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。对于初学者，经常会搞不清楚margin，padding之间的层次、关...

查看更多精彩>>