以两个并排显示的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. Iconfinder 如何杜绝盗版，哈希算法检测图像重复

    原地址:http://blog.jobbole.com/65914/ 本文由 伯乐在线 - 小鱼 翻译自 Silviu Tantos.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. [伯乐在线导读 ...

  2. 智能手机的工业控制应用方案——SimpleWiFi在工业控制领域应用

    智能手机的工业控制应用方案——SimpleWiFi在工业控制领域应用    先上图: 现在的智能控制都是基于微控制器,随着智能的手持终端的普及,基于智能终端的控制就会越来越普遍. WIFI便是其中的一 ...

  3. 找工作笔试面试那些事儿(8)---常问的CC++基础题

    这一部分是C/C++程序员在面试的时候会被问到的一些题目的汇总.来源于基本笔试面试书籍,可能有一部分题比较老,但是这也算是基础中的基础,就归纳归纳放上来了.大牛们看到一笑而过就好,普通人看看要是能补上 ...

  4. 10、ERP设计之系统基础管理(BS)- 平台化设计

    ShareERP 2013-09-03 ERP业务平台化是每个软件提供商必须要进行的趋势,传统定制化路线已死,不能走定制化的老路了.以往最大问的题是不能累积和沉淀技术及提升项目业务管理能力,其次是管理 ...

  5. HTML5拖动画布/拖放

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...

  6. FZU 1686（重复覆盖）

    题目连接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=31370 题意:用尽量少r*c的小矩形覆盖大矩形n*m中的所有1,将 ...

  7. HUNNU11354:Is the Name of This Problem

    http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11354&courseid=0 Problem des ...

  8. POJ 1205 Water Treatment Plants(递推)

    题意   建设一条河岸的污水处理系统  河岸有n个城市   每一个城市都能够自己处理污水 V   也能够把污水传到相邻的城市处理 >或<   除了你传给我我也传给你这样的情况   其他都是 ...

  9. Android onTouch、OnLongClick、onClick和ScrollView滑动事件冲突

    为了实现近期录制的长按,松开手指,结束录制功能.在项目,难道你去走一走会头晕,书写demo为了下一个梳理. 顺便研究android事件调用机制. 先上效果界面: 布局: <RelativeLay ...

  10. 浅谈android的am命令

    android系统为大家提供了adb工具,在adb的基础上执行adb shell就可以从PC上对手机侧执行shell命令.和pc的linux系统一样,在系统的默认路径syste/bin下面是可执行程序 ...