以两个并排显示的div为例说明.

现在两个div都有背景颜色, 右边的div中有几行p,

若是想要使两个div之间有间隔, 即两块带了颜色区域之间产生空隙, 则给div的css中外边距margin赋值;

若是想要右边div中的p与右边div的边界有一定距离, 则给div的内边距padding复制.

通过这个栗子就能比较好的区分margin和padding的用法了.

区分内边距与外边距padding和margin的更多相关文章

  1. padding和margin——内边距和外边距

    一.padding——内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. <style> div.outer{ width: 400p ...

  2. (转)css内边距与外边距的区别，精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  3. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  4. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  5. CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

  6. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

  7. jquery获取元素的所有宽高（包括内边距和外边距）

    width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距).                    innerHeight() ...

  8. css常用属性：居中展示、内边距、外边距

    1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...

  9. css总结9：内边距（padding）和外边距（margin）

    1 css总结9:内边距和外边距 通过css总结8:盒子模型可知:内边距(padding),外边距(margin).可以影响盒子在浏览器的位置. 1.1 padding使用:{padding:上 右 ...

随机推荐

  1. RIA Test：try catch 对 Error #1009 （无法访问空对象引用的属性或方法）的处理

    功能: 实现登录账户的强制登录, 用If 判断当前账户是否可用.若可用,则跳出if体直接登录,若不可用,则进入If体点击 “强制登录” 按钮. 问题:如果不可用,则if 条件中的对象不可见,这样程序会 ...

  2. POJ2599+POJ2082【最大矩形面积】

    题目链接:http://poj.org/problem?id=2559 题目链接:http://poj.org/problem?id=2082 这一类题目的解法,不知自己闲着没事就做了两个. 果然压栈 ...

  3. SQL Server Database 维护计划创建一个完整的备份策略

     SQL Server维护计划Maintenance Plan这是一个非常有用的维护工具,能够完成大部分的数据库维护任务,通过这些功能包.您可以省略大量的编码时间. 介绍的不是非常多,特此补上一篇 ...

  4. NSDictionary、NSMutableDictionary基本使用

    郝萌主倾心贡献,尊重作者的劳动成果.请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  5. VS Code开发调试.NET Core

    使用VS Code开发 调试.NET Core 应用程序   使用VS Code开发 调试.NET Core RC2应用程序,由于.NET Core 目前还处于预览版. 本文使用微软提供的示例进行开发 ...

  6. bzoj（矩阵快速幂）

    题意:定义Concatenate(1,N)=1234567……n.比如Concatenate(1,13)=12345678910111213.给定n和m,求Concatenate(1,n)%m. (1 ...

  7. BlueJ的code pad

    Java的REPL BlueJ的code pad实用吗?Java对(Read-Eval-Print Loop)不提供原生支持.这样的"交互式解释器"或"交互式编程环境&q ...

  8. Django Form Media 阅读笔记

    ---恢复内容开始--- Form Media Rendering an attractive and easy-to-use Web form requires more than just HTM ...

  9. selenium通过WebDriverWait实现ajax测试

    selenium通过WebDriverWait实现ajax测试 AndroidDriver driver = new AndroidDriver(); driver.get("http:// ...

  10. 使用JS模拟出Map对象

    近期要做的一个项目,支持方提供的一个Map方法,用着相当能够,功能稍有欠缺,因此我为之做了扩展,下面是代码: function Map() { this.elements = new Array(); ...