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

韩曙亮

发布于 2023-03-30 19:46:45

2.4K0

发布于 2023-03-30 19:46:45

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、元素默认的外边距

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>

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