margin与padding的区别

最新推荐文章于 2024-07-09 15:07:03 发布

debug2

最新推荐文章于 2024-07-09 15:07:03 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/debug2/article/details/6193799

padding margin 都是边距的含义，关键问题得明白是什么相对什么的边距．

padding 是控件的内容相对控件的边缘的边距．

margin 是控件边缘相对父空间的边距．

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

debug2

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

padding与margin的区别

Lily's Android tech Blog

02-14

5万+

<br />之前一直没有搞懂android:padding和android:layout_margin的区别，其实概念很简单，padding是站在父view的角度描述问题，它规定它里面的内容必须与这个父view边界的距离。margin则是站在自己的角度描述问题，规定自己和其他（上下左右）的view之间的距离，如果同一级只有一个view，那么它的效果基本上就和padding一样了。例如我的XML layout代码如下：<br /><?xml version="1.0" encoding="utf-8"?>

margin和padding区别

m0_55930865的博客

04-02

177

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #div1{ margin:20px; padding:10px; border:2px red solid; } #div2{ border:2px blu.

参与评论您还未登录，请先登录后发表或查看评论

margin 与padding的区别

abments的博客

07-09

1334

margin：外边距，是指元素与其周围元素之间的距离。它定义在元素的外部，用来隔开元素与元素之间的空间。padding：内边距，是指元素内部的内容与元素边界之间的距离。它定义在元素的内部，用来隔开元素与内容之间的空间。

Padding 和 Margin 的区别详解

My_wife_QBL的博客

07-09

7754

padding属性用于设置元素内容与其边框之间的间距。换句话说，padding是元素内部的空间，它位于元素内容和边框之间。padding可以应用于元素的四个边（上、右、下、左），也可以分别设置每个边的值。margin属性用于设置元素与其相邻元素之间的间距。换句话说，margin是元素外部的空间，它位于元素边框与其他元素之间。margin同样可以应用于元素的四个边，也可以分别设置每个边的值。

Margin 与Padding的区别

m0_59181747的博客

07-12

8295

margin是外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。例如两个文本框的距离使用margin，文本框的边框和文本内容之间的距离使用paddingmargin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。...

Class与ID区别 margin和padding区别 CSS学习笔记

10-30

CSS学习笔记 - Class与ID区别、margin和padding区别在CSS学习中，有两个非常重要的概念：Class与ID和margin与padding。虽然它们都是CSS中的基本概念，但是许多初学者却不知道它们的区别和使用场景。 Class与ID...

CSS中margin和padding的区别浅析

01-19

下面讲解 padding和margin常用的用法一、padding 1、语法结构（1）padding-left:10px; 左内边距（2）padding-right:10px; 右内边距（3）padding-top:10px; 上内边距（4）padding-bottom:10px; 下内边距（5）...

设置margin和padding为0可去掉DIV与DIV的空白

09-25

在本段中，我们将详细探讨如何通过调整margin和padding属性来消除之间的空白间隙，以及使用overflow:hidden来进一步处理可能的问题。首先，我们需要了解margin和padding的含义及其作用。margin指的是元素边框与其...

margin和padding的区别以及什么时候使用

qq_42919799的博客

10-21

8619

margin和padding的区别以及什么时候使用首先需要明白，盒子模型主要定义四个区域：内容（content）、边框与内容的区域，称为内边距（padding）、边框（border）、边框与外部的区域，称为外边距（margin）。区别 margin：表示边框以外的区域 padding：表示边框与内容之间的区域使用场景使用margin的场景：需要在border（边框）以外的区域添加空白间距时；空白区域不需要使用背景颜色时注意：上下两个相连的盒子之间使用的外边距需要相互抵消。需要

Android布局中margin与padding的区别

Xiao_Spring的博客

08-04

1万+

我们知道Android开发不仅仅有代码的动态控制，而且还涉及到布局的静态搭建（xml）。几乎在每一个xml文件中，我们总会看到margin和padding这两个属性，今天让我们初步探究一下它们之间的区别。首先为了便于说明，我们先画一个三层布局，如下图。这里布局的意思是广义的，泛指View等等。padding的含义在日常英语中，padding的含义为“垫料”，“衬料”等。在Android布局中，pad

Android布局中margin,padding,align的用法和区别

scarecrow_fly的博客

07-22

2万+

Android布局中margin,padding,align的用法和区别一、margin的用法 android : layout_marginxxx的用法是指当前组件距离其父组件在xxx方向上的边距比如说：android:layout_marginleft = "30px" -...

属性padding和margin的区别

洪茂杰的博客

03-31

1万+

属性padding和margin的区别

margin和padding的区别

Mango_yoo的博客

05-19

2105

在刚开始学习html的时候，我总分不清margin和padding他俩到底是指的哪一部分，现在通过一个例子总算弄清楚了他们两者的范围，简要跟大家说一下，不足之处多多批评指正哦！做过网页的应该都见过这张图片，它已经很直白的给我们展示了margin和padding分属的区域，以中间那条实线为分界点，往外是margin作用的区域，往内是padding作用的区域。接下来通过一个实例再来看一下：这是...

【margin和padding的区别】

weixin_30702413的博客

01-03

464

margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距） padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距） 1、语法结构（1）padding-left:10px; /margin-left:10px;　　　　　　　　　左内/外边距（2）padding-right:10px; /ma...

CSS中Margin和padding属性的区别

赤道与北极

03-11

1万+

今天在调试页面中，遇到些问题。特记录下：要在火狐中居中必须加上:margin:0 auto;修正IE问题（救急用）：*html .cssclass （修正IE6） *+html .cssclass（修正IE7） CSS中Margin和padding属性的区别margin：层的边框以外留的空白 background-color：背景颜色 ba

HTML中margin、padding和border的区别

青梅煮码

11-25

1万+

前端页面是需要给用户展示信息的，是离不开布局的，但是各个标签也不会挤在一起，有的标签距离很远有的很近，有的还有边框，这就需要调试出来了，其中margin、padding和border就是HTML中最常用的边框调试属性了。margin是设置两个标签的间隔，也就是距离；padding这个是比如一个p标签，它是100px*100px,我们使用的时候p标签的文字是贴着p标签的最左侧的，想要它的文字距离边界

超详细的yolov3深度剖析+源码debug级讲解（一）

最新发布

04-18

<think>好的，用户想了解CSS中margin和padding的区别及使用场景。我需要先回顾一下相关的知识，并参考提供的引用内容来组织回答。首先，根据引用[3]，margin和padding的主要区别在于定义位置和作用对象。Margin是外边距，控制元素与其他元素之间的距离，而padding是内边距，控制内容与元素边框之间的距离。这点需要明确分开，作为区别的核心。然后，引用[2]和[4]提到了使用场景。比如，当需要在边框外侧留白且不需要背景色时用margin，而内侧需要背景色时用padding。另外，margin的折叠现象也是一个重点，比如上下两个盒子的margin会合并，而padding不会。这点需要举例说明，让用户更容易理解。接下来，显示效果的不同，如padding会影响元素尺寸，特别是没有使用box-sizing的情况下。而margin不会改变元素本身的大小，只是影响周围空间。应用场景方面，布局调整用margin，内容间距用padding，这点可以结合例子说明。另外，需要注意margin可以取负值，这在布局调整时有用，而padding不行。这也是使用场景中的一个区别点，可能需要提到。然后，要确保回答结构清晰，分点列出区别和使用场景，每个部分都给出具体的例子，比如用代码示例展示如何设置margin和padding，以及效果的不同。最后，根据用户的要求生成相关问题，这些问题应该覆盖常见的疑问，比如如何避免margin折叠，如何计算盒子模型的总尺寸等。需要检查是否所有的引用都正确标注，比如关于margin折叠和padding影响尺寸的地方引用对应的来源。同时，确保语言简洁明了，符合中文表达习惯，不使用Markdown格式，行内公式用$...$，独立公式用$$...$$，但在这个问题中可能不需要数学公式，不过如果有涉及的话要注意格式正确。总结一下，回答的结构应该是先区别，再使用场景，最后注意事项，每个部分分点说明，并引用对应的资料。然后生成相关问题，帮助用户深入理解。</think>### CSS中margin与padding的区别及使用场景 #### 一、核心区别 1. **定义位置不同** - **margin（外边距）**：作用于元素外部，控制元素与其他元素之间的距离[^3]。 - **padding（内边距）**：作用于元素内部，控制内容与元素边框之间的距离[^3]。 2. **作用对象不同** - **margin**：影响相邻元素的布局，例如通过负值调整元素位置[^2]。 - **padding**：影响元素内部内容，例如调整文字与边框的间距[^4]。 3. **显示效果不同** - **margin**：仅改变元素外部空间，不改变元素自身尺寸（除非触发外边距折叠）。 - **padding**：增加元素总尺寸（除非设置`box-sizing: border-box`），例如添加`padding: 10px`会使元素宽度增加20px（左右各10px）。 4. **合并现象** - **margin**：垂直方向相邻元素的外边距会折叠（取较大值），例如上下两个`div`的`margin: 15px`和`margin: 20px`最终间距为20px[^2][^4]。 - **padding**：无合并现象，值直接叠加[^3]。 5. **背景与负值** - **margin**：空白区域无背景色，支持负值（如`margin-left: -10px`）。 - **padding**：空白区域受元素背景色影响，不支持负值[^2][^4]。 #### 二、使用场景 1. **使用margin的典型场景** - 调整元素间的间距（如导航菜单项之间）。 - 实现元素居中对齐（`margin: 0 auto`）。 - 通过负值微调布局（如重叠效果）。 ```css .box { margin: 20px; /* 四周留白 */ margin-left: -10px; /* 左移元素 */ } ``` 2. **使用padding的典型场景** - 控制内容与边框的距离（如按钮文字与边框的间距）。 - 为元素添加背景色包裹的留白区域。 ```css .button { padding: 10px 20px; /* 上下10px，左右20px */ background: blue; } ``` #### 三、注意事项 - **盒子模型计算**：默认情况下（`box-sizing: content-box`），元素的最终宽度为： $$总宽度 = width + padding + border + margin$$ 若使用`box-sizing: border-box`，则总宽度固定，`padding`和`border`会向内压缩内容区域[^3]。 - **避免布局冲突**：在Flex或Grid布局中，优先使用`gap`属性控制间距，而非过度依赖`margin`。