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. TensorFlow C++接口编译和使用

    部分内容from: Tensorflow C++ 从训练到部署(1):环境搭建 在之前的编译中,已经编译好了tensorflow_pkg相关的wheel.现在有一个需求,需要按照C++的代码进行模型加 ...

  2. java-操作string的常用语法

    1.Java判断String是否以某个字符串开头: String mobile = "8618730600000";System.out.println(mobile.starts ...

  3. djnago中间件

    前言 在form表单中当我们提交表单时会有这样的错误>>>>请求post时候的会出现403 forbidden,那我们就说说这个类中间件,(csrf只是中间件的一种) 以前我们 ...

  4. 03.Zabbix应用服务监控

    一.Zabbix监控Nginx 1.1 实验环境 服务器系统 角色 IP CentOS 7.4 x86_64 Zabbix-Server 192.168.90.10 CentOS 7.4 x86_64 ...

  5. idea 设置Terminal为git终端

  6. sql查询数据结果发送到邮箱

    #!/bin/bash user=root password=xx dbname=xx DATE=`date +%F` #注意:此处mysql要用全路劲,否则计划任务会执行失败 /mydata/mys ...

  7. Ubuntu安装截图软件shutter

    参考链接: Ubuntu 安装和配置shutter截图软件 解决shutter不能编辑的问题:https://itsfoss.com/shutter-edit-button-disabled/ 安装前 ...

  8. python+Appium自动化：app滑动操作swipe

    swipe Appium使用滑动操作用到了swipe方法,定义如下: swipe(self, start_x, start_y, end_x, end_y, duration=None) 从一个点滑动 ...

  9. rac 关于RACScheduler的一点学习

    RACScheduler  信号调度器,是一个线性执行队列,rac中的信号可以在RACScheduler上执行任务.发送结果,底层用GCD封装的. rac中提供生成线程的几个方法: 1:schedul ...

  10. 02—EF初次体验

    新建个表,我用的是sql server2014,我会把文件发上来,如果是低版本的,可以执行语句,数据库就自己创建吧. USE [testdb] GO CREATE TABLE [dbo].[Produ ...