1.首先弄清楚什么事元素：
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
就是：元素=标签+元素的内容，而内容可以有也可以没有。
参考：http://www.w3school.com.cn/html/html_elements.asp
2.理解每个元素都有border属性。
没有设置border时，border默认为0.
3.margin和padding 他们都是围绕这个border这个变化的。
如下面
margin：
<html>
<body>
<p style="background:red; margin-top:200px; border: 1 solid">
这个段落没有指定外边距。
</p>
</body>
</html>
说明：设置margin后 p元素就会相对body向下移动200px；(你可以去掉margin-对比一下)
padding：
<html>
<body>
<p style="background:red; padding-top:200px; border: 1 solid">
这个段落没有指定外边距。
</p>
</body>
</html>
说明：设置padding后 p元素就会相对border向下移动200px；就是说元素border变的宽了200px；
你可以用下面的列子对比
<html>
<body>
<p style="background:red; margin-top:200px;padding-top:200px; border: 1 solid">
这个段落没有指定外边距。
</p>
</body>
</html>
注意：一定要理解元素的定义和每个元素都有border属性。
- 大小: 31.7 KB
分享到：
相关推荐
这个一个CSS padding和margin的例子，对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...
### Alignment、Margin 和 Padding 概述 在 Windows Presentation Foundation (WPF) 开发过程中，对元素进行精确定位是一项至关重要的任务。为了更好地理解和运用这些技术，本篇将详细介绍 `HorizontalAlignment`、...
padding和margin区别 padding和margin区别 padding和margin区别padding和margin区别
**CSS的margin和padding详解** **Margin是什么** 在CSS中，`margin`是一个非常重要的属性，它用于定义元素周围的空间，即元素与元素之间或元素与容器边界的距离。`margin`是透明的，不会影响元素本身的颜色或背景...
HTML 中的 padding 和 margin 的区别 HTML 中的 padding 和 margin 是两个常用的 CSS 属性，它们都是用于控制 HTML 元素的布局和样式的，但它们之间存在着明显的区别。 首先，让我们来了解一下 padding 属性。...
#### 五、`margin`与`padding`的区别 虽然`margin`与`padding`都可以用来创建元素间的空白，但它们之间存在明显的区别： 1. **作用范围**： - `margin`：控制元素外部的空白，不占用空间。 - `padding`：控制...
CSS学习笔记 - Class与ID区别、margin和padding区别 在CSS学习中，有两个非常重要的概念：Class与ID和margin与padding。虽然它们都是CSS中的基本概念，但是许多初学者却不知道它们的区别和使用场景。 Class与ID...
总之，理解并熟练掌握`padding`与`margin`的区别及应用场景对于Android开发者来说至关重要。这不仅有助于提高应用的美观度，还能提升用户的使用体验。希望本文能帮助您更好地理解和运用这两个属性。
下面讲解 padding和margin常用的用法 一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）padding-top:10px; 上内边距 （4）padding-bottom:10px; 下内边距 （5）...
在本段中，我们将详细探讨如何通过调整margin和padding属性来消除之间的空白间隙，以及使用overflow:hidden来进一步处理可能的问题。 首先，我们需要了解margin和padding的含义及其作用。margin指的是元素边框与其...
而在这些视觉样式定义中，margin（外边距）和padding（内边距）是非常常用的两个属性，它们用于调整元素与元素之间的空间以及元素内容与元素边界之间的空间。由于不同的浏览器可能会有不同的默认样式，因此开发者在...
前端新手网页练习，内容关键词:H5，HTML5，CSS，技术关键词：div,margin,padding，用途：一个完整的页面代码，包含css样式，适合新手学习。html+css实现简单网页效果源码，尚且没有复杂的后台，给前端新手学习之用。
1.需要在 border 外侧添加空白时 2.空白处不需要背景（色）时 3.上下相连的两个盒子之间的空白，需要相互抵消时，如 15px+20px 的 margi
关于`margin`和`padding`的使用，以下是一些关键点： - **值的设置**：可以单独设置每个方向的值，例如`margin: 10px 20px 30px 40px;`代表上、右、下、左的外边距。也可以简写，如`margin: 10px 20px;`代表上下10...
CSS中的padding（内边距）和margin（外边距）是控制网页布局中元素之间距离的关键属性。本文将从语法结构、可能取的值、浏览器兼容性等方面详细介绍padding和margin的异同点，并结合图示提供直观的理解。 一、...
创建接口时，最重要的部分之一就是间距（ margin和padding ）。 一致的单位对于Web应用程序的统一，平衡和节奏至关重要。 单位空间是为您的项目生成一致间距的基础，无论系统中可能需要多少变化。 Sass 3.3.x中内置...
09_盒子模型-padding和margin对比
这些列表元素在不同的浏览器中可能有不同的默认样式，尤其是涉及到`padding`和`margin`属性。`padding`是元素内部边距，而`margin`是元素与周围元素之间的空白区域。 在《CSS Mastery》一书中提到，Internet ...