Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )

【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )

作者头像
韩曙亮
发布于 2023-03-30 11:46:45
发布于 2023-03-30 11:46:45
2.8K00
代码可运行
举报
运行总次数:0
代码可运行

文章目录

一、元素默认的外边距


1、body 标签的默认外边距

向 HTML 的 <body> 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 , 如下图所示 :

按 F12 键 , 进入 调试模式 , 选中 body 标签 ,

在 上图 右侧 红色矩形框 中 , 可以看到 body 标签 默认设置了 8 像素的外边距 , 对应的调试模式中 橙色的 部分 ;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
body {
    display: block;
    margin: 8px;
}

2、p 标签的默认外边距

在 body 中添加 p 标签 , 代码如下 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
	<div></div>
	<p>p 标签 默认外边距</p>
</body>

显示效果如下 :

按 F12 键 , 进入调试模式 , 发现 p 标签元素 上下 都有 橙色的 外边距 ,

右侧 红色矩形框 中 , 上边距 和 下边距 都是 1em ;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

二、清除元素默认的内外边距


1、清除方式

使用 通配符选择器 设置 清除内外边距 样式 , 将所有的标签元素 的 默认的内外边距 全部设置为 0 ;

清除标签默认的内外边距 样式 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* {
   /* 清除标签默认的内边距 */
   padding: 0;   
   /* 清除标签默认的外边距 */      
   margin: 0;
}

上述代码是所有的 CSS 标签的第一行代码 ;

2、代码示例

代码示例 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>清除元素默认外边距</title>
	<style type="text/css">
		* {
		   /* 清除标签默认的内边距 */
		   padding: 0;   
		   /* 清除标签默认的外边距 */      
		   margin: 0;
		}
		
		div {  
			/* 设置盒子大小 */
			width: 400px;
			height: 400px;

			/* 设置图片背景 */
			background: pink url(images/image.jpg) no-repeat;
			/* 通过修改 背景位置 background-position 修改图片显示位置 */
			background-position: 50px 50px;
		}
	</style>
</head>
<body>
	<div></div>
	<p>p 标签 默认外边距</p>
</body>
</html>

效果展示 :

按 F12 键 进入调试模式 , 查看 body 标签 , 其 margin: 8px; 被覆盖 , 该样式作废 , 取而代之的是

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* {
    padding: 0;
    margin: 0;
}

样式 ;

查看 p 标签样式 , 其 上下边距 也消失了 ;

三、行内元素边距设置


为 行内元素 设置 上下边距 是无效的 , 建议只为 行内元素 设置 左右边距 ;

如果为 行内元素 设置了上下边距 , 可以在某些浏览器或者 web 应用场景出现适配问题 ;

反面代码示例 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>清除元素默认外边距</title>
	<style type="text/css">
		* {
		   /* 清除标签默认的内边距 */
		   padding: 0;   
		   /* 清除标签默认的外边距 */      
		   margin: 0;
		}
		
		div {  
			/* 设置盒子大小 */
			width: 400px;
			height: 400px;

			/* 设置图片背景 */
			background: pink url(images/image.jpg) no-repeat;
			/* 通过修改 背景位置 background-position 修改图片显示位置 */
			background-position: 50px 50px;
		}
		
		span {
			/* 行内元素设置 四个方向的边距 , 仅左右边距生效 */
			margin: 50px;
		}
	</style>
</head>
<body>
	<div> <span>行内元素</span> </div>
	<p>p 标签 默认外边距</p>
</body>
</html>

显示效果 : 按下 F12 键 , 进入 调试模式 , 选中 span 行内元素 , 为其设置 四个边距 , 只有 左右边距 50px 生效 ;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
行内元素内外边距探究:为何span设置上下margin和padding不起效
今天正好有时间,就来实验了一把。原来 span 标签默认的不是只能设置左右边距,还有更有意思的现象。
德顺
2019/11/13
8.8K0
行内元素内外边距探究:为何span设置上下margin和padding不起效
【CSS】盒子模型外边距 ⑤ ( 模型盒子垂直外边距的合并 - 塌陷 | 相邻模型盒子垂直外边距合并 | 嵌套模型盒子垂直外边距合并 )
注意 : 仅在 垂直方向 上会出现 外边距合并 现象 , 水平方向 外边距 不会合并 ;
韩曙亮
2023/03/30
1.2K0
【CSS】盒子模型外边距 ⑤ ( 模型盒子垂直外边距的合并 - 塌陷 | 相邻模型盒子垂直外边距合并 | 嵌套模型盒子垂直外边距合并 )
前端成神之路-盒子模型
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
海仔
2020/11/12
1K0
前端成神之路-盒子模型
从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动
元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。
Daotin
2018/08/31
6410
从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动
【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★
HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;
韩曙亮
2024/03/12
5390
【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★
【CSS】CSS三大特性、盒子模型
​相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
P_M_P
2024/04/12
2600
【CSS】CSS三大特性、盒子模型
大型编程电视剧连载 | CSS知识点硬核整理归纳(二)
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
上分如喝水
2021/08/16
1.9K0
大型编程电视剧连载 | CSS知识点硬核整理归纳(二)
CSS盒子模型
网页的布局本质就是把网页的元素(图片,文字都)都放入盒子里面,然后按照自己的需要摆放盒子的过程就是网页布局。
羊羽shine
2019/06/24
7930
CSS盒子模型
CSS的盒子模型
一个盒子中主要的属性就5个:width、height、padding、border、margin。 width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。 height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距”
Demo_Yang
2018/10/15
1.3K0
css基础
如一个div元素可以添加多个样式,一个样式可以重复添加在一个元素上,以优先级最高|最近的为主
wolf
2020/09/21
1.3K0
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
将 效果图片拖动 到 Adobe Fireworks 中 , 使用 切片工具 分析盒子模型 :
韩曙亮
2023/03/30
1.6K0
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
CSS学习笔记(基础篇)
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Daotin
2018/08/31
4.7K0
CSS学习笔记(基础篇)
【Web APIs】JavaScript 操作元素 ⑦ ( 多精灵图背景设置 | 核心要点 - 设置 backgroundPosition 属性 | 清除默认样式 | )
本案例中 , 就 使用了 <li> 元素 进行页面结构布局 , 布局时需要使用到 浮动 样式 , 计算换行时 , 每个像素宽高都要精确计算 ;
韩曙亮
2024/08/09
2000
【Web APIs】JavaScript 操作元素 ⑦ ( 多精灵图背景设置 | 核心要点 - 设置 backgroundPosition 属性 | 清除默认样式 | )
CSS重要的盒子模型
新浪导航栏的核心就是因为里面的字数不一样多,所以我们不方便给宽度,还是给padding ,撑开盒子的。
乐心湖
2020/07/31
1.1K0
CSS重要的盒子模型
CSS 盒子模型(一)
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
用户7630333
2023/12/07
2090
CSS 盒子模型(一)
盒子模型(CSS重点)
其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。
星辰_大海
2020/09/30
1.7K0
Web前端基础(03)
本节所有的代码: https://download.csdn.net/download/qq_44273429/12729648 未完待续,,, 下一节链接: Web前端基础(04)
海拥
2021/08/23
5360
CSS盒子模型
边框的每一条边都能定义样式( border-top / bottom / left / right )
小丞同学
2021/08/16
8010
外边距合并规则
margin的合并规则算是CSS盒模型里最复杂部分,没有之一。因为这部分内容涉及很多不太容易理解的概念,例如clearance(间隙)、normal flow/in-flow(常规流)、BFC(块格式化上下文)、line box(行框)、inline box(行内框)、bidi(双向环境)等等
ayqy贾杰
2019/06/12
1.4K0
【CSS】盒子模型外边距 ② ( 盒子模型水平居中 | 盒子内文字、行内元素、行内块元素居中对齐 )
如果要 将一个 块级元素 的 盒子模型 设置为 水平居中 样式 , 需要设置以下两项 :
韩曙亮
2023/03/30
1.2K0
【CSS】盒子模型外边距 ② ( 盒子模型水平居中 | 盒子内文字、行内元素、行内块元素居中对齐 )
推荐阅读
相关推荐
行内元素内外边距探究:为何span设置上下margin和padding不起效
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验