以两个并排显示的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. Lua 解释器

    Lua 解释器 警告⚠️:这将是一个又臭又长的系列教程,教程结束的时候,你将拥有一个除了性能差劲.扩展性差.标准库不完善之外,其他方面都和官方相差无几的 Lua 语言解释器.说白了,这个系列的教程实现 ...

  2. 胡na娜、少年和恩师-写在甲午冬的仅仅言片语及感想

    [写在全新为移动互联网而生的Zoomla!逐浪CMS2 x2.1公布前] 恩师, 他来到这个乡村中学,带着自己的书.吉它和理想, 用自己最好的三年青春浇灌了这一代人, 在我辍学时,给我鼓舞,帮助我继续 ...

  3. 开发腾讯移动游戏平台SDK Android版Ane扩展 总结

    本文记录了在开发 腾讯移动游戏平台SDK(MSDK) Android版Ane扩展 过程中所遇到的问题和相关解决方式 问题一:编译报错:Unable to resolve target 'android ...

  4. centos 更改hostname

    vim /etc/hosts vim /etc/sysconfig/network hostname hostname mlzboy-centos63

  5. NYOJ 12 喷水装置（二）

    pid=12">喷水装置(二) 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描写叙述 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n( ...

  6. Android数据库hibernate框架

    说明 /** * YDL_Hibernate总结 <br/> * (一)支持功能: 1.自己主动建表,支持属性来自继承类:可依据注解自己主动完毕建表,而且对于继承类中的注解字段也支持自己主 ...

  7. 实习第一天之数据绑定：<%#Eval("PartyName")%>'

    1.asp:HyperLink ID="Link" runat="server" Target="_blank" Text='<%#E ...

  8. linux下golang

    linux下golang的配置 linux下golang的配置 之前开发golang一直在windows下,今天在linux下试了一下 ,遇到一些梗,比如go 找不到 sync包.花了一小时全部解决, ...

  9. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. mongoDB 查询附近的人的语句

    mongoDB 自带LBS查询附近的人 {"location":{ $nearSphere: { $geometry: { type : "Point", co ...