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. 前端必学TypeScript之第一弹，st基础类型！

    TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比 ...

  2. 4.SpringMVC 配置式开发-处理器映射器

    处理器映射器 HandlerMapping HandlerMapping 接口负责根据request请求找到对应的Handler处理器及Interceptor拦截器, 并将它们封装在HandlerEx ...

  3. 【Distributed】限流技巧

    一.概述 1.1 高并发服务限流特技 1.2 为什么要互联网项目要限流 1.3 高并发限流解决方案 二.限流算法 2.1 计数器 2.2 滑动窗口计数 2.3 令牌桶算法 使用RateLimiter实 ...

  4. 【Day3】2.re模块使用案例

    课程目标 1.提取 2.匹配 3.替换 1.提取 import re ret = re.findall([正则表达式]) # 返回的类型是列表 2.匹配 import re ret = re.matc ...

  5. 对于写Python学习笔记的看法

    学习写笔记是一个不错的学习方法,好些同学在学习Python过程中也会写学习笔记.俗话说好记性不如烂笔头,我很赞同这个说法. 我列举几个学习Python写笔记的好处: 1.Python知识的二度巩固 通 ...

  6. Linux下安装opencv（踩坑记录帖）

    1.首先安装依赖项:sudo apt install build-essential sudo apt install build-essentialsudo apt install cmake gi ...

  7. PAT Basic 1061 判断题 (15 分)

    判断题的评判很简单,本题就要求你写个简单的程序帮助老师判题并统计学生们判断题的得分. 输入格式: 输入在第一行给出两个不超过 100 的正整数 N 和 M,分别是学生人数和判断题数量.第二行给出 M ...

  8. Lambda表达式语法进一步巩固

    上一次已经初步使用到了Lambda表达式了,这次再次对它的语法进行一下巩固,因为它实在是太重要的,所以多花时间彻底理解它是非常有必要的. 在"Java8 in Action"一书中 ...

  9. ShedLock日常使用

    首发于个人博客:ShedLock日常使用 场景模拟 定时器Scheduler在平时使用比较频繁,比如定时数据整理,定时向客户发送问候信息等...,定时任务的配置比较简单,比如在springboot中, ...

  10. HashSet怎样保证元素不重复

    文章同步更新在个人博客:HashSet怎样保证元素不重复 都知道HashSet中不能存放重复元素,有时候可以用来做去重操作等.但是其内部是怎么保证元素不重复的呢?下面从源码去看看. 打开HashSet ...