margin（外边距） padding（内边距）
  一、语法结构

（1）margin-left:10px; 左外边距

（2）margin-right:10px; 右外边距

（3）margin-top:10px; 上外边距

（4）margin-bottom:10px; 下外边距

（5）margin:10px; 四边统一外边距

（6）margin:10px 20px; 上下、左右外边距

（7）margin:10px 20px 30px; 上、左右、下外边距

（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

  一、语法结构

（1）padding-left:10px; 左内边距

（2）padding-right:10px; 右内边距

（3）padding-top:10px; 上内边距

（4）padding-bottom:10px; 下内边距

（5）padding：10px; 四边统一内边距

（6）padding:10px 20px; 上下、左右内边距

（7）padding:10px 20px 30px; 上、左右、下内边距

（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

二、我们可以用一张图来更加直观的了解他们的区别

三、那么他们会出现哪些bug呢？

margin

在我们给div元素设置margin的时候，常常会出现这样的问题，比如有一个大块里面有一个小块，我们给小块设置向下移50px，会发现小块和大块都会向下移50px；那么我们现在就需要给大块的div添加样式overflow：hidden；（溢出的部分隐藏）。

padding

在我们给div元素设置padding的时候，常常会出现这样的问题，比如有一个大块里面有一个小块，我们给大块设置padding：50px；会发现它高增加50px；那么我们现在就需要给大块的div添加样式box-sizing:border-box；（盒模型）。

margin与padding的区别与用法—以及出现bug的解决方法的更多相关文章

  1. margin和padding的区别和用法

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

  2. CSS中margin和padding的区别

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

  3. 【margin和padding的区别】

    margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离.(内 ...

  4. CSS中margin与padding的区别

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

  5. CSS属性margin、padding的区别

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

  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. centos7上安装zookeeper

    centos7上安装zookeeper 1 准备工作 1.准备服务器,本次安装采用 centos7系统.内存2G.存储60G的虚拟机服务器一台: 2.服务器安装java环境: 参考文章<cent ...

  2. 最大公共子序列（Runtime faster than 92.73% of Python3)

    其中的算法思想只是较为简单的动态规划,过去各种各样的考试写过很多次C/C++版本的,最近开始用Python做leetcode中的题目时遇到了该题目,很常规的做法竟然得到了意想不到的速度,但内存占用较差 ...

  3. 松软科技课堂:Winform之TextBox

    松软科技文(www.sysoft.net.cn): 文本框的几种模式:Multiline(多行).PasswordChar(密码)将文本框的PasswordChar设为*就是密码框效果,将MultiL ...

  4. java架构之路-（JVM优化与原理）JVM之G1回收器和常见参数配置

    过去的几天里,我把JVM内部的垃圾回收算法和垃圾回收器.还剩下最后一个G1回收器没有说,我们今天数一下G1回收器和常见的参数配置. G1回收器 G1 (Garbage-First)是一款面向服务器的垃 ...

  5. 实现一个正则表达式引擎in Python(二)

    项目地址:Regex in Python 在看一下之前正则的语法的 BNF 范式 group ::= ("(" expr ")")* expr ::= fact ...

  6. UVM——寄存器模型相关的一些函数

    0. 引言 在UVM支持的寄存器操作中,有get.update.mirror.write等等一些方法,在这里整理一下他们的用法. 寄存器模型中的寄存器值应该与DUT保持同步,但是由于DUT的值是实时更 ...

  7. （5）Makefile详解

         Makefile是一个自动化的编译工具,关系到整个工程的编译规则,极大的提高了软件开发的效率.     (1)Makefile的编译规则 //Makefile 也可以写作 makefile1 ...

  8. 夯实Java基础系列7：一文读懂Java 代码块和执行顺序

    目录 Java中的构造方法 构造方法简介 构造方法实例 例 1 例 2 Java中的几种构造方法详解 普通构造方法 默认构造方法 重载构造方法 java子类构造方法调用父类构造方法 Java中的代码块 ...

  9. linux初学者小记（二）

    文件管理 1.文件系统结构元素 文件和目录被组织成一个单根倒置树结构文件系统从根目录下开始,用"/"表示. 1.1文件系统 # 根文件系统(rootfs):root filesys ...

  10. vue中关于滚动条的那点事

    vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...