HTML中margin、padding和border的区别

最新推荐文章于 2022-05-17 08:51:13 发布
最新推荐文章于 2022-05-17 08:51:13 发布
阅读量1.8w 收藏 45
点赞数 19
分类专栏： HTML5 文章标签： html border padding margin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coco__D/article/details/53334481
版权

前端页面是需要给用户展示信息的，是离不开布局的，但是各个标签也不会挤在一起，有的标签距离很远有的很近，有的还有边框，这就需要调试出来了，其中margin、padding和border就是HTML中最常用的边框调试属性了。

margin

是设置两个标签的间隔，也就是距离；

padding

这个是比如一个p标签，它是100px*100px,我们使用的时候p标签的文字是贴着p标签的最左侧的，想要它的文字距离边界远一点，好看一点，就是需要做一个样式的调整，我们可以用到padding这个属性，加入说设置是10px，就是说这个p标签的大小依然是100px*100px，但是它的内容是变成了90px*90px；


border

boarder是设置边框的意思，他和padding的区别在于，padding是在标签边缘往里缩减，而border是在标签的边缘往外扩展，也就是说是一个100px*100px的标签，我设置他的border为20px，我们就可以看到整个标签的大小是变成了120px*120px，也就是说多出来了20px，其标签的内容也还是100px*100px的

青梅煮码
关注
  • 19
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css padding属性
m0_74284133的博客
05-10 1832
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。时：该属性值定义上内边距、右内边距、下内边距、左内边距 示例：如果希望所有内边距都是10 像素，只需要设置：padding:10px;标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是。所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。上面的例子1中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？
margin和padding区别
m0_55930865的博客
04-02 129
<!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.
CSS盒模型之padding和border
sleepwalker_1992的专栏
05-08 1197
一个盒子的主要属性有五个：width、height、padding、border、margin。width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度padding是“内边距”的意思border是“边框”margin是“外边距”1、paddingpadding的区域有背景颜色，css2....
border、margin、padding三者的区别
weixin_30551963的博客
10-06 632
当你写前端的时候，肯定会遇到border,margin和padding这几个单词。 如： padding: 16px 0; margin: 0 10px; 在CSS中，他们是表示距离的东西，很多人刚开始搞不清楚他们的区别，我也是。在网上找到一个很好的说明他们之间的区别的示意图，border、margin、padding三者的区别。 边框属性(border)用来设定一个元素的边线。 边距属性(ma...
图解CSS中padding、margin、border的区别及使用
Rosen's
08-12 1822
先从盒子模型图来直观感受一下三者区别： padding 设置或返回元素的内边距。 该属性可使用 1 到 4 种值： 如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。 如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。 如果规定三种值，比如：div {padd...
padding,border,margin的区别
xiaolinyeyi的专栏
10-20 1093
翻了一些资料，自己又写了写，算是简单的区分了这san
border、margin、padding属性的区别
Regin的博客
05-17 557
## border、margin、padding属性的区别释义 border:边框，用来设定一个元素的边线，（内边框|外边框） margin:边距，用来设置一个元素所占空间的边缘（外边框）到相邻元素之间的距离 padding：间隙，用来设置元素内容到元素边（内边框）界的距离
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"?>
css下margin、padding、border、background和font缩写示例
10-30
本文将详细介绍如何对`margin`、`padding`、`border`、`background`和`font`等属性进行缩写，以及在特定情况下的使用技巧。 首先，`margin`属性用于设置元素的外边距，它有四种可能的值：上、右、下、左。当所有...
Css padding和margin区别
12-08
这个一个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...
详解盒模型大小取决于它的padding，margin，border数值
11-21
盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所示，这个盒模型元素框的宽度值=内容...
深入解析CSS中margin属性的使用
12-13
一、Margin的特性margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。外边距的 margin-width 的值类型有：auto | ...
CSS边距属性定义是用margin还是用padding的两者对比
09-25
在CSS布局中，边距（margin）和内边距（padding）是两个非常重要的属性，它们用于控制元素的空白区域，对于网页设计的布局和视觉效果有着显著的影响。接下来我们将详细探讨这两个属性的区别以及在何时应该使用它们。...
CSS padding margin border属性详解
weixin_30298497的博客
02-19 256
图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常会搞不清楚margin，background-color，bac...
CSS中的margin、border、padding区别
自学吧
02-09 4188
CSS padding margin border属性详解 图解CSS padding、margin、border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常...
margin、border和padding之间的区别
u013488649的专栏
11-12 5270
margin和border影响都是对外的，就是说，在里面的表不会因为这两个值改变而改变。padding影响是对内的，会影响在其定义的表内部的表。 一、margin是和border的距离； 二、content距离最外层的div都是1px。如果margin为1,border为1，那么content距离margin还是1PX，因为border是会在原来大小上向外加上的。（这点你可以自己建两个div对
CSS的Padding, Margin, Border 的区别
oscar999的专栏
12-16 1036
CSS 的Padding 、Margin 和Border 设置原理。 盒子模型
懂点前端——对CSS中的Padding、Border、Margin属性的理解
cslover的博客
05-17 4719
作为一个志在AIot(实际在写上位机程序、嵌入式代码)的工程师，怎么又关心起前端来了呢？怎么说呢，前端的应用范围广啊，从高大上的算法、富有科技感的物联网应用到无处不在的Web应用，只要是需要和终端用户交互的，不都得要用到前端，所以懂点前端是能防身的。 今天就研究一下CSS中的content、padding、border、margin这几个概念。 CSS是网页的样式文件，它让网页的布局和样式变得美观和丰富多彩，而使用CSS进行布局与设计要用到一个叫做Box Model的模型，这是W3C提出的，W3C说Box
CSS中margin/padding/border有什么区别
Tech in Pieces
07-23 393
通俗易懂的来说 这就是三层边界： 从外到内 直到content margin：层的边框以外留的空白 background-color：背景颜色 background-image：背景图片 padding：层的边框到层的内容之间的空白 border：边框 content：内容 为什么我们要这么定义呢？ W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(pa
html5margin和padding border
最新发布
04-06
HTML5中的margin、padding和border是Web页面设计中常用的CSS样式属性。其中，margin用来设置元素与其周围元素之间的距离；padding用来设置元素内容与元素边框之间的距离；border则用来设置元素的边框样式和宽度等。这些属性可以帮助设计者控制页面中各个元素之间的排版和布局，从而实现更好的用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值