文档章节

padding(内边距)、margin(外边距)、border(边框)

o
 osc_g8254g7s
发布于 2019/08/19 21:25
字数 331
阅读 8
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1、所有的 HTML 元素本质上是小的矩形块,代表着某一小块区域。有三个影响HTML元素布局的重要属性:padding(内边距)margin(外边距)border(边框)

元素的 padding 控制元素内容 content和元素边框 border 之间的距离。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离。

我们可以看到上图绿方块和红方块都位于黄方块之中,但是红方块比绿方块具有更大的 padding。当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

 

2、元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。在下图,我们可以看到绿方块和红方块都位于黄方块之中,注意红方块比绿方块具有更大的外边距 margin,使得它看起来更小。当你增大绿方块的 margin 时,将会增加元素边框和元素实际所占空间之间的距离。

 

3、元素的 margin 控制元素的 border 和元素实际所占空间的距离。将一个元素的 margin 设置为负值,元素将会变大。具体可以看看红方块的 margin 值。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS 框模型 element、width、height、border、padding、margin区别

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框...

Left左
2018/06/20
0
0
CSS盒模型(重点)

CSS三个大核心模块:盒模型 、浮动和定位,其余的都是细节。 网页布局 就是把网页元素(文字,图片等)资源放入盒子里,利用CSS合理摆放盒子的过程。 说明 盒模型就是把HTML页面中的元素看成...

gongjunhe
06/01
0
0
CSS盒模型(重点)

CSS三个大核心模块:盒模型 、浮动和定位,其余的都是细节。 网页布局 就是把网页元素(文字,图片等)资源放入盒子里,利用CSS合理摆放盒子的过程。 说明 盒模型就是把HTML页面中的元素看成...

天易IT学院
06/01
0
0
WEB前端 盒子模型初识

CSS 框模型概述 <br />元素内是要展示的内容,里面的padding、margin、border都会参与计算盒子的大小,例如:有一个盒子大小为100px,外边距10px,内边距5px,实际要展示的内容只有70px<br /...

osc_ckub9v3l
2019/11/16
2
0
css框模型

本文转载于:猿2048网站css框模型 css框模型 (一)内边距 padding 内边距 即边框和内容之间的空白区域 h1 {padding: 10px 0.25em 2ex 20%;} 四个值这种则分别是按照上,右,下,左的顺序设置...

前端老手
2019/08/27
48
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-11

更新时间: 2020-07-11 00:00 Scientists make precise edits to mitochondrial DNA for first time - (nature.com) 科学家首次对线粒体DNA进行精确编辑 得分:66 | 评论:4 LibreOffice: The N......

FalconChen
38分钟前
95
0
是否有可能从另一个git存储库中挑选一个提交? - Is it possible to cherry-pick a commit from another git repository?

问题: I'm working with a git repository that needs a commit from another git repository that knows nothing of the first. 我正在使用一个git存储库,需要从另一个不知道第一个存储库......

技术盛宴
昨天
26
0
【LeetCode】53 盛最多水的容器

题目 解题思路 双指针法: https://leetcode-cn.com/problems/container-with-most-water/solution/sheng-zui-duo-shui-de-rong-qi-by-leetcode-solution/ 代码 public class Solution { ......

JaneRoad
昨天
20
0
阿里云OSS配置CDN加速

首先购买CDN流量包 然后添加域名 添加好后 然后将域名OSS.xxxx.com 解析到 生成的CDN域名上 这样就完成了

可达鸭眉头一皱
昨天
16
0
js 整数与小数正则替换片段

说明 /(\d+)/g 整数 /(\d+\.\d+)rem/g 小数 /(\d+\.\d+|\d+)rem/g 其中 | 或 条件 例子 全局查找带 rem 单位的,替换成 px 单位 let text = text.replace(/(\d+\.\d+|\d+)rem/g, function(s......

DrChenXX
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部