正文

web前端--css中margin和padding的区别

Brown羊羊  2022-02-11  402

关键词：

pdding是内边距，是盒子的边与盒子内部元素的距离;margin是盒子的外边距，即盒子与盒子之间的距离

padding说明：

检索或设置对象四边的内部边距。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>padding_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    float: left;
    padding: 10px;
    border: 1px solid #000;
}
</style>
</head>
<body>
<div class="test">注意我离4条边框线的距离</div>
</body>
</html>

页面展示效果（内容到边框的距离）：

margin说明：

检索或设置对象四边的外延边距。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
外延边距始终透明。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>margin_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{margin:20px;background:#eee;}
</style>
</head>
<body>
<div class="test">注意我距上、右、下、左的距离</div>
</body>
</html>

页面展示效果（内边框到外边框的距离）：

css参考手册：

http://www.css88.com/book/css/

css中margin和padding的区别

paddingmargin都是边距的含义，关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。... 查看详情

web前端补充css补充

css常用的一些属性：1.去掉下划线：text-decoration:none;2.加上下划线：text-decoration:underline;3.调整文本和图片的位置（也就是设置元素的垂直对齐方式）：vertical-align:-20px;没设置之前：设置之后：3.外边距：margin4.内边距：padding5.... 查看详情

web前端面试题第二道—简述盒模型

参考技术AW3C组织建议把所有网页上的对象都放在一个盒子（box）中，就是所说的盒子模型，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：实际内容(content)、填充(padding)、边框(border)，边界(margin)。一个div就是一个盒... 查看详情

css中margin和padding的区别

CSS中margin和padding有以下三方面区别。在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。1、语法结构。padding：padding-... 查看详情

我们可以在 css 中定义 min-margin 和 max-margin，max-padding 和 min-padding 吗？

】我们可以在css中定义min-margin和max-margin，max-padding和min-padding吗？【英文标题】：Canwedefinemin-marginandmax-margin,max-paddingandmin-paddingincss?【发布时间】：2016-10-3022:38:09【问题描述】：我们可以在CSS中定义min-margin和max-margin、max-padding... 查看详情

css中margin和padding的区别

参考技术ACSS中margin和padding有以下三方面区别。在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。1、语法结构。paddi... 查看详情

前端试题-css试题

1.css属性命名区分大小写吗？不区分，不过一般小写，便于理解2.margin-top和margin-bottom对于行内（内敛inline）元素效果一样么？3.padding-top和padding-bottom对于inline元素都会增加元素本身的大小么？回答2，3，需要了解html里的替换元素... 查看详情

margin和padding

web前端基础:css

1.盒模型在CSS中，"boxmodel"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。1.1盒模型示意图&nbs... 查看详情

padding和margin的用法

在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。一、padding1、语法结构（1）padding-left:10px;左内边距（2）padding-right... 查看详情

margin和padding的区别

目前web2.0已经越来被人们认可，因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准，其中很重要的一条就是新的布局规则，div+css。以前基本上是用table布局的，这种传统的方式简单直观，但是这新的标准我学习起来时常... 查看详情

03前端_css盒子

盒子模型css中的盒子是由element、padding、border、margin组成element：元素内容padding：内边距：是内容距离内边框的距离border：边框margin：外边距：是元素和元素之间的距离盒子的属性内容的宽度和高度width宽度属性：宽度值|百分比|a... 查看详情

知道padding-left和margin-left的区别，但css中left和padding-left有啥具体区别呢？

css中Margin和padding属性的区别margin：层的边框以外留的空白padding：层的边框到层的内容之间的空白padding-toppadding-leftpadding-rightpadding-bottommargin-topmargin-leftmargin-rightmargin-bottom上下左右间隙宽度相同.d1padding:1cm.d1margin:1cm也可以分别设... 查看详情

web学习-css盒模型

...个盒子中主要的属性就5个：width、height、padding、border、margin。width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度padding是“内边距”... 查看详情

css中margin、padding、border的默认值是多少

在DIV的CSS文件中，如果只设定字体大小、颜色等而不设定margin、padding、border。那么margin、padding、border的默认值是多少？是零吗？如果我希望margin、padding、border是零。那么在CSS中写上maigin:0;padding:0;border:none还是不写，空在那里好... 查看详情

web前端常见面试题(代码片段)

1、什么是盒子模型？CSS盒模型(BoxModel)，又称框模型。它包括：content、padding、border、margin，所有HTML元素都可以看作盒子。注: 当通过CSS指定一个元素的宽度和高度属性时，只是设置了实际内容区域的宽度和高度。一旦为页面... 查看详情

padding和margin设置成百分比

Margin和Padding是我们在网页设计经常使用到的CSS样式，他们分别是间距和填充，一个作用于盒子外面，一个作用于盒子里面，默认的情况下，这些属性的值都会被计算在盒子的面积里面，在网页开发中的流体布局或者是响应式布... 查看详情

margin,padding之我见

...绝对会占很重要的作用，但是在实际的项目中，很多新手前端程序员们往往不能正确的使用它们，导致会出现一些不必要的麻烦，下面是我在前几天的项目中遇到的一些问题，以及个人总结的一些方法，仅供参考。想比margin... 查看详情