以两个并排显示的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. android一个上传图片的样例,包含怎样终止上传过程，假设在上传的时候更新进度条(一)

    先上效果图: Layout为: <? xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  2. hdu-4418-Time travel-高斯+概率dp

    把N个点先转化为2*N-2个点. 比方说把012345转化成0123454321. 这样,就能够找出随意两两个点之间的关系. 然后依据关系能够得出来一个一元多项式的矩阵. 然后就用高斯消元求出矩阵就可 ...

  3. JavaScript 中的事件类型3（读书笔记思维导图）

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  4. Java Word Ladder(字梯)

    问题: Given two words (start and end), and a dictionary, find the length of shortest transformation se ...

  5. PVPlayer的实现方式

    关于opencore下多媒体播放,在mediaserver进程里面仅仅有一行代码: MediaPlayerService::instantiate(); 这行代码的作用是初始化一个MediaPlaye ...

  6. Powershell Mail module, 发送outbox 里的全部邮件（一个.csv文件代表一封邮件）

    把creating mail代码写到调用处,往outbox写入 mailxxx.csv文件,入面记录了邮件的主要内容 写入 #template $TMP = IMPORT-CSV "$($d ...

  7. 基于TFTP协议的远程升级设计

    说明:因为CSDN博客编辑器对word格式近乎不支持.因此对表格使用了图片方式(最后一个表格未使用图片格式.大家能够看看效果),CSDN博客编辑器上传图片十分不人性化(直接复制图片是不显示的),因此本 ...

  8. 获取Google音乐的具体信息(方便对Google音乐批量下载)

    Google音乐都是正版音乐, 不像百度所有都是盗链, 并且死链也多. 但有一个麻烦就是要下载Google音乐的时候得一个一个的点击下载链接, 进入下载页面再点"下载", 才干下载 ...

  9. namespace命名空间

    在讨论如何使用命名空间之前,必须了解 PHP 是如何知道要使用哪一个命名空间中的元素的.可以将 PHP 命名空间与文件系统作一个简单的类比.在文件系统中访问一个文件有三种方式: 相对文件名形式如foo ...

  10. SVN的log，cat，list，diff的使用

     svn log          展示给你主要信息:每个版本附加在版本上的作者与日期信息和所有路径修改. svn diff          显示特定修改的行级详细信息. svn cat       ...