什么时候使用padding？什么时候使用margin？

于 2019-05-15 09:41:03 发布
阅读量249 收藏 2
点赞数 2
分类专栏： 前端零基础 文章标签： padding marin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jnshu_it/article/details/88290647
版权
本文详细解析了CSS中的padding和margin属性，包括它们的语法结构、可取值以及浏览器兼容性。padding是内容与边框之间的内边距，margin则是边框与其他元素之间的外边距。在布局时，理解这两者的区别对于避免外边距合并和创建自适应布局至关重要。此外，负值margin可以用于创新布局效果，如双飞翼布局。
摘要由CSDN通过智能技术生成


这里是修真院前端小课堂，本篇分析的主题是

【什么时候使用padding？什么时候使用margin？】

 

一、背景介绍

margin和padding是盒子模型的两个重要概念，这两个属性在进行页面布局的时候有很重要的作用。要理解padding 和 margin ，首先要从盒子模型开始。

盒子模型由块级元素构成，也可以说成一个 block 元素是一个盒子。一个盒子模型有五个属性：width、height、padding、border、margin。

组成盒子模型的块级元素由content(内容),padding(内边距), border(边框), margin(外边距)四个部分组成。 其中padding 是内边距，就是内容content 与边框之间的距离。padding与内容包含在border内，padding有和内容区相同的背景是色  margin 是外边距，是边框border与其他元素间的距离，margin没有背景色，是透明的。

 

如下图所示，padding和margin 和盒子模型的关系。

 

二、知识剖析

语法结构

1、padding和margin的语法结构是一样的

&#x

最低0.47元/天 解锁文章
IT修真院
关注
专栏目录
博客
IT行业都有哪些职位，初学者如何选择才能够快速进入这个行业？
05-14 2万+
【本人性格不好，被惹到了必然句句带脏字，所以评论中如果有不开眼的，请慎重。另外，这篇回答从头到尾都是我自己的个人偏见，绝对不客观，也绝对不会为本答案负责。所以，有自己正常思维的请不要再看下去了。】互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型？1.产品2.UI3.CSS...
博客
什么是无人教学
04-13 699
欢迎来到IT修真院，来了解这种极具开创性和颠覆性的无人教学模式。在无人教学的模式中，并没有老师的角色，而是用一套智能教学的系统来代替“老师授课，学生听课”的方式，是的，我们通过任务分配的方式，让学员在完成任务的过程中主动学习。把被动听课，改成主动学习，仅仅是一个开始，要完善这种学习模式，还需要完善以下的教学体系：1 界定技能边界，确保能达到正式工作的要求2 分解任务，保证所有的任务都来自真实项目3 明确验收标准，来确定任务能否通关4 提供操作步骤，引导学员按步骤完成学习...
博客
Vue 骚技巧，策略模式实现动态表单验证
07-23 1012
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。关键是策略的实现和使用分离。注意：本文可能用到一些编码技巧比如 IIFE（Immediately Invoked Function Expression, 立即调用函数表达式），ES6 的语法 let/const、箭头函数、rest 参数，短路运算符 等，如果还没接触过可以点击链接稍加学习 ~1...
博客
由浅入深，66条JavaScript面试知识点
07-22 1359
钱昱多年前端工作经验 《JavaScript 设计模式精讲》 作者，主要分享前端方面技术博客公众号：前端下午茶HTML&CSS： 浏览器内核 盒模型、flex布局、两/三栏布局、水平/垂直居中； BFC、清除浮动； css3动画、H5新特性。 JavaScript： 继承、原型链、this指向、设计模式、call, apply, bind,； new实现、防抖节流、let, var, const 区别、暂时性死区、eve...
博客
进击的 JAMStack
07-21 696
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站什么是JAMStack概念JAMStack中的JAM其实是三个词的缩写，它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈（Tech Stack），也就是我们在构建应用的时候具体使用到的技术的集合。举个例子，国外现在比.
博客
Vue.js 组件复用和扩展之道
07-20 820
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站软件编程有一个重要的原则是 D.R.Y（Don't Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？Vue 提供了不少 API 和模式来支持组件复用和扩展，你.
博客
深入理解Java的接口和抽象类
07-17 592
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会对于面向对象编程来说，抽象是它的一大特征之一。在Java中，可以通过两种形式来体现OOP的抽象：接口和抽象类。这两者有太多相似的地方，又有太多不同的地方。很多人在初学的时候会以为它们可以随意互换使用，但是实际则不然。今天我们就一起来学习一下Java中的接口和抽象类。一、抽象类　 在了解抽象类之前，先来了解一下抽象方法。抽象方法..
博客
一篇文章了解并发数据结构
07-16 704
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会CopyOnWriteArrayList的内部实现与Vector不同。它是当对象进行写操作时，复制该对象；若进行的是读操作，则直接返回结果，操作过程中不进行同步。CopyOnWriteArrayList很好地利用了对象的不变性，在没有对对象进行写操作前，由于对象未发生改变，因此不必加锁。而在试图改变对象时，总是先获取对象的一个副本，然后对副本.
博客
Java 8 最佳技巧
07-15 565
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会在过去的几年中，我一直使用Java 8 进行了很多的编码工作，用于开发新应用和迁移遗留应用，我觉得是时候写一些有用的”最佳实践”。我个人不喜欢”最佳实践”这个术语，因为它意味着“一刀切”的解决方案，当然编码工作是不会这样的–这是因为我们开发人员会想出适合我们的方案。但我发现我对Java8特别的喜欢，它让我的生活更轻松一点，所以我想就此话..
博客
Java多线程编程基础三（原子性，可见性和有序性）
07-14 577
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在并发编程中，我们通常会遇到以下三个问题：原子性问题，可见性问题，有序性问题。一、原子性即一个操作或者多个操作，要么全部执行并且执行的过程不会被任何因素打断，要么就都不执行。原子性就像数据库里面的事务一样，他们是一个团队，同生共死。...
博客
史上最全的 JavaScript 模块化方案和工具
07-13 665
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站模块化是大型前端项目的必备要素。JavaScript 从诞生至今，出现过各种各样的模块化方案，让我们一起来盘点下吧。IIFE 模块默认情况下，在浏览器宿主环境里定义的变量都是全局变量，如果页面引用了多个这样的 JavaScript 文件，很容易造成命名冲突。/.
博客
10 个很实用的 JavaScript 技巧
07-09 613
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站编程语言通常暗藏着各种技巧，熟练使用这些技巧可以提高开发效率。JavaScript 就是一门技巧性很强的语言，掌握常见的语法技巧不但可以加深对语言特性的理解，还可以简化代码，提高编码效率。本文分享 10 个常用的技巧，希望能成为你的开发工具箱的一部分。1argument.
博客
五分钟了解浏览器工作原理
07-08 791
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站Web 浏览器无疑是用户访问互联网最常见的入口。浏览器凭借其免安装和跨平台等优势，逐渐取代了很多传统的富客户端。Web 浏览器通过向 URL 发送网络请求来访问 Web 服务器资源，并以交互性的方式展示这些内容。基本操作包括获取、处理、显示和存储。常见的浏览器包括..
博客
前端必备基础知识：window.location 详解
06-19 3081
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站前端开发人员对window.location对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。我们以一个常见的 URL 为例，看看window.location包含哪些属性和方法。window.location.hre..
博客
ES6 箭头函数大起底：熟知这几个特点让你少踩很多坑
06-18 600
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站我们都知道，在 JavaScript 里定义函数有多种方式。最常见的是用function关键字：//函数声明functionsayHi(someone){return`Hello,${someone}!`;}//函数表达式consts...
博客
Java原子类实现原理分析
06-11 551
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在谈谈java中的volatile一文中，我们提到过并发包中的原子类可以解决类似num++这样的复合类操作的原子性问题，相比锁机制，使用原子类更精巧轻量，性能开销更小，本章就一起来分析下原子类的实现机理。悲观的解决方案（阻塞同步）我们知道，num+
博客
详解Spring Retry实现原理
06-09 863
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记本文通过一个简单的例子演示Spring Retry的实现原理，例子中定义的注解只包含重试次数属性，实际上Spring Retry中注解可设置属性要多的多，单纯为了讲解原理，所以弄简单点，关于Spring Retry可查阅相关文档、博客。注解定义
博客
五分钟了解CDN
06-05 585
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记一、什么是CDN？CDN全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础.
博客
HTML5基本布局
06-04 633
作者简介：杨老师10年前端工作经验，主要分享：前端、UI设计、平面等。公众号：web前端开发HTML4HTML5<!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header><h1></h1><h2&gt.
博客
HTML5的22小技巧
06-03 527
作者简介：杨老师10年前端工作经验，主要分享：前端、UI设计、平面等。公众号：web前端开发1. 新的文档类型（Doctype）<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>上面这个既麻烦又难记的XHTML文档类型你还在使用吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值