CSS中margin与padding的区别

最新推荐文章于 2024-05-23 16:14:20 发布
最新推荐文章于 2024-05-23 16:14:20 发布
阅读量784 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T_Mac_one/article/details/12083003
版权

1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的 是对于具体内容方块的外边距

2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离,是对于具体内容方块的内边距

 

注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.

T_Mac_one
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中margin和padding的区别浅析
09-24
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。下面讲解 padding和margin常用的用法
CSS中margin和padding的区别
知其所以然
12-05 1504
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。       下面讲解 padding和margin常用的用法 一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内
CSS中margin和padding属性的区别
weixin_50547200的博客
06-24 6987
在CSS中，margin和padding两个属性都可以调整位置，因此比较容易混淆。这篇文章详细分析两者的不同，希望对学习CSS的朋友有帮助。padding的作用是调整当前元素内容(例如文本内容)在元素中的位置。默认内容应该是紧贴元素的边界显示，增加padding后可以增大内容和边界的距离。可看如下代码： div.y未设置padding，而div.x设置了四个padding属性，其效果如下图： 大家可以看到在风格为div.y中，文字是紧贴div这个元素范围的边界的，也就是默认文字的高度和所覆盖的...
css中margin和padding有什么区别
weixin_35757191的博客
02-19 489
margin和padding都是CSS用来控制元素的外边距的属性。margin是控制元素外边距的距离，而padding是控制元素内边距的距离。margin会影响元素的绝对定位，而padding会影响元素的相对定位。 ...
Class与ID区别 margin和padding区别 CSS学习笔记
10-30
Class与ID区别 margin和padding区别 CSS学习笔记
css下margin、padding、border、background和font缩写示例
10-30
CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS代码简化。
css中padding和margin的异同点介绍
12-07
一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）padding-top:10px; 上内边距 （4）padding-bottom:10px; 下内边距 （5）padding：10px; 四边统一内边距 （6）...
CSS浮动（CSS从入门到精通学习第四天）
m0_49067926的博客
05-22 962
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
前端学习CSS
Kongfutu的博客
05-19 267
CSS 语法CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式选择器{属性1：属性值1；属性2：属性值2；1. 选择器的声明中可以写无数条属性2. 声明的每一行属性，都需要以英文分号结尾：3. 声明中的所有属性和值都是以键值对这种形式出现的；示例：这是一个 p 标签选择器p{CSS二种导入万式下面是三种常见的 CSS 导入方式：1.内联样式 （Inline Styles）
AI视频教程下载：ChatGPT API、HTML、CSS 和 JS开发AI聊天机器人
AIGCTribe的博客
05-22 431
完成本课程后,你将拥有构建复杂聊天机器人所需的技能和信心,这些聊天机器人可以彻底革新用户交互、推动参与度并提升客户体验。利用 ChatGPT API、HTML、CSS 和 JavaScript 的强大功能,你将学习如何设计和构建吸引用户并提供个性化体验的聊天机器人界面。你将精通 HTML、CSS 和 JavaScript 这些基本网络技术,以创建视觉吸引力强、响应迅速的聊天机器人界面。在课程中,你将开启一段令人兴奋的聊天机器人开发之旅,并装备自己创建智能对话代理所需的技能和知识。
探索 CSS、Sass 和 SCSS：区别与应用
一个普通人
05-21 1217
CSS 是一种用来描述 HTML 或 XML 文档外观和格式的样式表语言。它通过定义样式规则，来控制网页元素的呈现方式。Sass 是一个 CSS 预处理器，扩展了 CSS，添加了变量、嵌套规则、混入、继承等功能，增强了样式表的功能性和可维护性。SCSS 是 Sass 的一种语法，是 CSS 的超集，这意味着所有有效的 CSS 代码在 SCSS 中同样有效。它结合了 CSS 的简单性和 Sass 的强大功能。CSS 是基础的样式表语言，语法简单但功能有限，适用于简单的样式需求。
前端已死? Bootstrap--CSS&组件
金灰的博客
05-14 1073
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多。通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。(这里的屏幕大小 是为了在前端显示的时候更好看,显示的更全.)用的时候href引用一下就行(link标签)( - 后面可加数字,总共12份就行.)--分的份数加起来是12就行了.v5--里面的图标更多.
Day06：Flex 布局
最新发布
EmulateStep的博客
05-23 1140
本文学习Flex布局，首先讲解了什么是标准流（文档流），接着将了浮动（float）布局，浮动布局为什么会脱标以及如何解决脱标的情况。接下来讲解了本文学习的重点，flex 弹性布局，关于 flex 弹性布局主要讲解了 flex 的组成、主轴对齐方式、侧轴对齐方式、如何修改主轴方向、弹性伸缩比、弹性盒子换行以及行内对齐方式，并通过多个例子详细讲解了弹性盒子的布局方式和常用属性，希望对大家有帮助！
HTML+CSS+JS简易计算器
2201_75813676的博客
05-18 305
index.css idnex.js 运行结果
百度页面奔跑的白熊html、css
2302_80141844的博客
05-16 1011
用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{100%{
css卡片翻转 父元素翻转子元素不翻转效果
weixin_43858851的博客
05-22 133
css卡片翻转 父元素翻转子元素不翻转效果
tailwindcss 使用
HYeeee的博客
05-22 154
3.0可不用配置，默认就是该模式，无法关闭。按需加载样式，定义在extend中的样式也一样，没被用到，不会加载。另外，如果在一个页面中，有动态计算的样式，会因为在编译阶段没有该样式导致不生效;这里的需求是：显示卡片个数根据页面宽度自适应，1600及以上显示4个，以下显示3个。模式下，如果样式可预见，可以在某个页面处固定写死那些动态生成的。模式下动态定义的样式不会解析出来。函数 —— （推荐方式）批量生成配置，从而获得对应。这个最大问题在于只能是。
css中margin和padding
03-17
在CSS中，margin和padding都是用来控制元素与其他元素之间的间距。 Margin是设置元素外边距，它可以设置上下左右四个方向的外边距。例如：margin: 10px 20px 30px 40px; 分别表示上右下左的外边距。 Padding是设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值