Difference between margin and padding?

Remember these 3 points:

  • The Margin is the extra space around the control.
  • The Padding is extra space inside the control.
  • The Padding of an outer control is the Margin of an inner control.

Demo Image:(where red box is desire control)

When to use margin vs padding in CSS [closed]

From https://www.w3schools.com/css/css_boxmodel.asp

Explanation of the different parts:

  • Content - The content of the box, where text and images appear

  • Padding - Clears an area around the content. The padding is transparent

  • Border - A border that goes around the padding and content

  • Margin - Clears an area outside the border. The margin is transparent

Live example (play around by changing the values): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

margin padding border的更多相关文章

  1. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  2. css样式margin padding border

  3. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  4. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  5. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  6. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  7. css的padding,border,margin的意思

    下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...

  8. 盒模型大小取决于它的padding，margin，border数值

    盒模型规定了元素框处理元素内容width与height值.内边距padding.边框border 和 外边距margin 的数值大小.边框内的空白是内边距padding,边框外的空白是外边距margi ...

  9. padding/border与width的关系

    本文讲述 padding / border 的设置后是否对 width 有影响,width 等于 auto 与 100% 的区别 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边 ...

随机推荐

  1. 关于微信小程序中的样式使用变量值的方法

    在开发过程中,通常碰到样式非固定的情况,这时候就要使用变量来规定样式,例如,一个view的宽度需要使用变量: 1. 在wxss中,定义变量:width:var(--width--); 2. 在js中, ...

  2. JS原生实现照片抽奖

    HTML表格标记实现九宫格,放入九张图片.利用CSS的滤镜属性控制图片的透明度.Javascript实现抽奖和中奖. 可以做为教师上课,随机抽取回答问题的同学,使学生感受到随机的公平性,简单有趣! 点 ...

  3. 数据库 master拒绝了 create database 权限

    1.通过windows身份验证方式登录 2.为登录名赋予服务器角色权限,其中dbcreator权限表示允许新增和修改权限,sysadmin权限是管理员权限,包含dbcreator范围,若不追求权限精准 ...

  4. python3学习特性

    一 实例变量与类变量 class Pepple: __age=18 __name="zhangfff" @classmethod def GetInfo(cls): print(c ...

  5. centos所有版本镜像下载地址

    centos所有版本镜像下载地址 版本号 下载地址 更新时间 centos2.1  iso镜像下载 2.1/ 2009/8/19  1:36 centos3.1  iso镜像下载 3.1/ 2005/ ...

  6. linux入门常用指令4.挂载数据盘

    挂载硬盘 #查看当前分区情况 [root@localhost ~]# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sdb 8:16 0 5G 0 dis ...

  7. (6)python基础数据类型

    python的六大标准数据类型 (一)Number   数字类型(int float bool complex) (二)String 字符串类型 (三)List 列表类型 (四)Tuple 元组类型 ...

  8. java——java跨平台原理

    不同操作系统不同的虚拟机,屏蔽不同系统指令集的差异. 开发程序只需要遵循java规范:

  9. (转)VMware虚拟机三种网络模式的区别及配置方法；

    我的一点实际经验理解桥接和NAT 桥接是虚拟机完全作为一个独立的地址接在局域网中,NAT是虚拟机依赖宿主主机地址转换的一种方式 例子我的虚拟机如果用桥接模式,连接外部网站如百度时会提示此pc没有装公司 ...

  10. Beyond Compare 4 使用30天后过期续用方法

    Beyond Compare 4 使用30天后过期续用方法 windows上的Beyond Compare 4软件过期了,两个方法: 方案一: 找到Beyond Compare 4安装目录,安装时默认 ...