提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

CSS 设置 模型 默认 元素 清除 盒子 行内
2023-06-13 09:18:08 时间

文章目录

一、元素默认的外边距

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 生效 ;

相关文章