以两个并排显示的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. 基于三星I9250演示自己弄的Miracast功能-手机对手机

    最终把Miracast功能測试通了,为了节省时间.我的Source端和Sink端都採用同一个机型.这样能够降低我为目标机编译4.4.2源码所耗费的时间.今天简单录制了一段视频.视频是用手机录制的,室内 ...

  2. Android架构设计和软硬整合完整训练

    Android架构设计和软硬整合完整训练 Android架构设计和软硬整合完整训练:HAL&Framework&Native Service&Android Service&a ...

  3. Managing Data in Containers

    Managing Data in Containers So far we've been introduced to some basic Docker concepts, seen how to ...

  4. [Java聊天室server]实战之五 读写循环（服务端)

    前言 学习不论什么一个稍有难度的技术,要对其有充分理性的分析,之后果断做出决定---->也就是人们常说的"多谋善断":本系列尽管涉及的是socket相关的知识,但学习之前,更 ...

  5. birdnest是什么意思_birdnest在线翻译_英语_读音_用法_例句_海词词典

    birdnest是什么意思_birdnest在线翻译_英语_读音_用法_例句_海词词典 birdnest

  6. 【剑指offer】复制的复杂链条

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26154691 题目描写叙述: 输入一个复杂链表(每一个节点中有节点值,以及两个指针,一个指 ...

  7. LeetCode——Rotate List

    Given a list, rotate the list to the right by k places, where k is non-negative. For example: Given  ...

  8. Makefile分析基础

    http://blog.csdn.net/ghostyu/article/details/6866863 在我前一篇写的[ linux驱动学习(一)Makefile基础]中,Makefile写的中规中 ...

  9. Objective-C之成魔之路【16-使用文件】

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

  10. windows之实现3D立体效果的三种方法

    第一种:快捷键:win+tab 另外一种:cmd输入rundll32.exe dwmapi #105 第三种:使用软件bumptop