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. 增删改查——Statement接口

    1.增加数据表中的元组 package pers.datebase.zsgc; import java.sql.Connection; import java.sql.DriverManager; i ...

  2. python里面的xlrd模块详解

    那我就一下面积个问题对xlrd模块进行学习一下: 1.什么是xlrd模块? 2.为什么使用xlrd模块? 3.怎样使用xlrd模块? 1.什么是xlrd模块? ♦python操作excel主要用到xl ...

  3. 初入计算机专业，学习c语言的第一周作业问答

    2019年9月17日下午3点30,我来到了1117教室准备上我进入大学的第一堂计算机专业课,并需要完成以下作业. 2.1 你对软件工程专业或者计算机科学与技术专业了解是怎样? 我所了解的计算机就是一台 ...

  4. [C++] 访问控制与继承详解

      1.访问控制中有三种角色:基类及其友元,派生类,类用户(对象):访问说明符分为public/protected/private,类的成员也相应的分为了3种.   2.访问说明符又分为两种:一个是基 ...

  5. 搭建Android+QT+OpenCV环境，实现“单色图片着色”效果

               OpenCV是我们大家非常熟悉的图像处理开源类库:在其新版本将原本在Contrib分库中的DNN模块融合到了主库中,并且更新了相应文档.这样我们就能够非常方便地利用OpenCV实 ...

  6. node学习之路

    现阶段开始学习使用node开发一个个人博客系统,nodejs 基于V8引擎,是一个让 JavaScript 运行在服务端的开发平台,功能强大 ,Node.js 可以作为服务器向用户提供服务,它跳过了 ...

  7. ZooKeeper的ACL实现源码阅读

    什么是ACL(Access Control List) zookeeper在分布式系统中承担中间件的作用,它管理的每一个节点上可能都存储这重要的信息,因为应用可以读取到任意节点,这就可能造成安全问题, ...

  8. Android Studio [跑马灯]

    MainActivity package com.xdw.secondapp; import android.graphics.Paint; import android.support.v7.app ...

  9. HNU_中小学数学卷子自动生成程序(个人项目）简要分析

    一.前言 首先,在这里特别感谢我的结对编程伙伴HnuLyx,他在算法上和设计思路上都与我有很大的不同,个人项目互评中,为我的项目提出了很多很好的建议,让我在认清自己不足的同时,了解到很多以前没有注意的 ...

  10. 基于Spark的电影推荐系统（实战简介）

    写在前面 一直不知道这个专栏该如何开始写,思来想去,还是暂时把自己对这个项目的一些想法 和大家分享 的形式来展现.有什么问题,欢迎大家一起留言讨论. 这个项目的源代码是在https://github. ...