文章目录

• 一、元素默认的外边距
• • 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>
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！