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

最新推荐文章于 2024-09-18 09:49:54 发布

韩曙亮

最新推荐文章于 2024-09-18 09:49:54 发布

阅读量1.9k

点赞数 3

分类专栏： CSS 文章标签： css html 前端元素默认外边距清除默认内外边距

本文链接：https://blog.csdn.net/shulianghan/article/details/129652764

版权

CSS 专栏收录该内容

142 篇文章 41 订阅

订阅专栏

文章目录

一、元素默认的外边距
- 1、body 标签的默认外边距
- 2、p 标签的默认外边距
二、清除元素默认的内外边距
- 1、清除方式
- 2、代码示例
三、行内元素边距设置

一、元素默认的外边距

1、body 标签的默认外边距

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

在这里插入图片描述

按 F12 键 , 进入调试模式 , 选中 body 标签 ,
在这里插入图片描述

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

body {
    display: block;
    margin: 8px;
}

2、p 标签的默认外边距

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

<body>
	<div></div>
	<p>p 标签 默认外边距</p>
</body>

显示效果如下 :
在这里插入图片描述

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

在这里插入图片描述
右侧红色矩形框中 , 上边距和下边距都是 1em ;

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

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

1、清除方式

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

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

* {
   /* 清除标签默认的内边距 */
   padding: 0;   
   /* 清除标签默认的外边距 */      
   margin: 0;
}

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

2、代码示例

代码示例 :

<!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;~~ 被覆盖 , 该样式作废 , 取而代之的是

* {
    padding: 0;
    margin: 0;
}

样式 ;

在这里插入图片描述

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

在这里插入图片描述

三、行内元素边距设置

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

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

~~反面代码示例 :~~

<!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>