margin和padding的区别

margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)

padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)

1、语法结构

(1)padding-left:10px; /margin-left:10px;           左内/外边距

(2)padding-right:10px; /margin-right:10px;         右内/外边距

(3)padding-top:10px; /margin-top:10px;            上内/外边距

(4)padding-bottom:10px; /margin-bottom:10px;             下内/外边距

(5)padding:10px;/ margin:10px;                              四边统一内/外边距

(6)padding:10px 20px; /margin:10px 20px;          上下、左右内/外边距

(7)padding:10px 20px 30px;/margin:10px 20px 30px;        上、左右、下内/外边距

(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距

 关于padding:

注意:将Padding设置为负值无效:

 在块元素中:

  因此,padding在块级元素下,上下左右可以随意设定,会对元素内部发生改变。

 在内联元素中:

  行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他

行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值,行内元素的padding元素,只有padding-

left和padding-right有效果,上下不识别;

关于margin:

 margin:0 auto;  只对块级元素起作用

 在块元素中:

因此,margin在块级元素下,上下左右可以随意设定。且块级元素的margin的参照基准是前一个元素即相对于自身之前的

元素有margin距离。如果元素是第一个元素,则就是相对于父元素的margin距离。

 在内联元素中:

  margin-top和margin-bottom对内联元素(对行)的高度没有影响,如果你要改变内联元素的行高即类似文本的行间距,那

么你只能使用这三个属性:line-height,fong-size,vertical-align。请记住,这个影响内联元素高度的是line-height而不是height。

【margin和padding的区别】的更多相关文章

  1. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  2. margin和padding的区别和用法

    margin和padding的区别和用法 什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...

  3. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  4. CSS属性margin、padding的区别

    原始状态 不设置margin和padding的状态 margin 设置外边距之后的状态 padding 设置内边距之后的状态 ,注意是撑开,外框高宽由300px变成450px. 说明:本文为原创作品, ...

  5. margin与padding的区别与用法—以及出现bug的解决方法

    margin(外边距) padding(内边距)   一.语法结构 (1)margin-left:10px; 左外边距 (2)margin-right:10px; 右外边距 (3)margin-top ...

  6. margin和padding的区别

    目前web2.0已经越来被人们认可,因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准,其中很重要的一条就是新的布局规则,div+css.以前基本上是用table布局的,这种传统的方式简 ...

  7. grivaty,margin和padding的区别

    layout_margn是指组件距离父窗体的距离, padding是指组件中的内容距离组件边缘的距离 Layout_grivaty与grivaty的区别 layout_grivaty是指组件相对父窗体 ...

  8. margin 和padding 的区别

    margin是用来隔开元素与元素的间距:padding是用来隔开元素与内容的间隔.margin用于布局分开元素使元素与元素互不相干: padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元 ...

  9. HTML中margin与padding的区别!(转)

    我们以DIV为一个盒子为例,既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的纸壁给他起个名 ...

随机推荐

  1. spark-submit参数说明--on YARN

    示例: spark-submit [--option value] <application jar> [application arguments] 参数名称 含义 --master M ...

  2. 浅谈Unix I/O模型

    关于I/O模型的文章比较多,参考多篇后理解上仍然不太满意,终需自己整理一次,也是编写高吞吐量高性能网络接口模块的基础.这里所说的主要针对网络I/O,近几年面对越来越大的用户请求量,如何优化这些步骤直接 ...

  3. http中的get和post(二)

    博客园精华区有篇文章< GET 和 POST 有什么区别?及为什么网上的多数答案都是错的 >,文中和回复多是对以下两个问题进行了深究: 长度限制 Url 是否隐藏数据 在我看来这两者都不是 ...

  4. Python Web框架

    本节对Python Web框架学习 一.MTVModel: 存放所有数据库相关文件Template:模板文件,存放html文件View: 业务处理,即函数文件 二.MVCmodel: 存放数据库相关文 ...

  5. php iconv 函数参数的区别

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/57 用户输入:英特尔® 酷睿™ i7处理器大显身手 case1 ...

  6. Cat 跨线程之 TaggedTransaction 用法和原理分析

    代码 package com.dianping.cat.message.internal; import com.dianping.cat.Cat; import com.dianping.cat.m ...

  7. Java编程学习知识点分享 入门必看

    Java编程学习知识点分享 入门必看 阿尔法颜色组成(alpha color component):颜色组成用来描述颜色的透明度或不透明度.阿尔法组成越高,颜色越不透明. API:应用编程接口.针对软 ...

  8. react看这篇就够了(react+webpack+redux+reactRouter+sass)

    本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...

  9. 自动删除文件脚本(Linux shell脚本)

    每天在/home/face/capturepic/2017/目录下都会产生很多文件 /home/face/capturepic/2017/4/21 /home/face/capturepic/2017 ...

  10. @Autowired内部实现原理

    @Autowiredprivate CustomerDao customerDao;        public void addCustomer() {        customerDao.add ...