CSS padding margin border

最新推荐文章于 2022-02-12 00:12:41 发布
最新推荐文章于 2022-02-12 00:12:41 发布
阅读量346 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherrcy/article/details/48437057
版权

图为CSS盒模型

margin：层的边框以外留的空白
background：背景
padding：层的边框到层的内容之间的空白 
border：边框 
content：内容

顺序为顺时针：上->右->下->左

margin :  40px;                                            距离上右下左，均为40px

margin :  40px   10px;                                距离上下，为40px ；距离左右，为10px

padding: 40px;                                            距离上右下左，均为40px

padding: 40px   10px;                                距离上下，为40px ；距离左右，为10px

padding: 40px   10px   20px;                    距离上40，下20，左右均为10

padding: 40px   10px   20px   30px;        距离上40，下20，右10，左30


为什么设了上和左，下和右设了也没有变化= =

cherrcy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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的一些理解
Dr.Monster小站
03-29 5647
之前做前端只是去写一些js,处理一些数据,现在又要开始要设计页面,写div块了,然后捣鼓了一下.调各个div块的时候真的是日了狗了,一块这出问题,一会那里出问题,烦得要死,对于css小白来说,苍天啊,还是后台好.调的时候div块最基本的调整我都是用的这几个属性,学艺不精,能搞出来就感觉很不容易了.一起来举个例子,一张大桌子,桌子上有好几个盘子,里面有好几盘菜,矩形的桌子和矩形的盘子你们应该见过吧....
CSS padding margin border属性详解
qq_43724983的博客
04-22 306
CSS padding margin border属性详解 1.css盒子 盒子模型的内容范围包括： 内容(content)、内边距(padding)、边框(border)、外边距(margin)组成 2.内边距-padding padding的作用是控制content到border的距离 填充属性 所有填充属性都可以具有以下值： 1、length-以px，pt，cm等指定填充。 2、％-...
图解CSS中padding、margin、border的区别及使用
Rosen's
08-12 1900
先从盒子模型图来直观感受一下三者区别： padding 设置或返回元素的内边距。 该属性可使用 1 到 4 种值： 如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。 如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。 如果规定三种值，比如：div {padd...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
JEECG官方博客
11-14 796
图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常会搞不清楚margin，background-color，bac...
CSS的Padding, Margin, Border 的区别
oscar999的专栏
12-16 1043
CSS 的Padding 、Margin 和Border 设置原理。 盒子模型
CSS样式padding margin border属性
漫游学海之旅
04-20 1099
CSS padding margin border属性详解图解CSS padding、margin、border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常
css中的margin、padding、border详解
ytangdigl的博客
08-10 2139
CSS 中有个重要的概念，就是盒子模式 (Box model)。 先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。 盒子里由外至里依次是： 1、margin 边距 2、border 边框 3、padding 间隙 (也有人称做补丁) 4、content (内容，比如文本，图片等)CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
margin、padding、border
LarsGyonX的博客
02-12 3588
从二维到三维再到实操的理解
浅谈css margin重叠
12-13
给父元素添加边缘属性，如padding、border； 同级元素margin反向重叠 同级元素margin反向重叠时，元素之间的距离为两个margin值中较大的那个。 因解决办法较少且兼容性较差，在具体编码中，应尽量避免这种情况的出现...
CSS边距属性定义是用margin还是用padding的两者对比
09-25
在CSS布局中，边距（margin）和内边距（padding）是两个非常重要的属性，它们用于控制元素的空白区域，对于网页设计的布局和视觉效果有着显著的影响。接下来我们将详细探讨这两个属性的区别以及在何时应该使用它们。...
CSS margin全面了解
09-27
与content、padding和border不同，margin的负值能够产生有趣的效果。当设置负值时，元素会向相反方向移动。在某些布局场景中，如流体布局或者创建响应式设计时，负margin能起到关键作用。例如，通过将一个元素的`...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
CSS盒模型详解：padding、border、outline与margin
CSS盒模型（CSS Box Model）是讨论这些概念的基础，它将HTML元素视为一个矩形盒子，由内容区域（Content）、内边距区域（Padding）、边框区域（Border）和外边距区域（Margin）组成。每个部分都有其特定的作用： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值