清除内外边距

最新推荐文章于 2023-03-19 19:49:44 发布

WinFang5

最新推荐文章于 2023-03-19 19:49:44 发布

阅读量1.6k

点赞数

分类专栏： Html5+Css3+移动Web_前端入门文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_51061595/article/details/120522075

版权

Html5+Css3+移动Web_前端入门专栏收录该内容

23 篇文章 0 订阅

订阅专栏

为什么要清除默认的内外边距。

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距。

方法

* {
	padding: 0;	
	margin: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>winFang</p>
</body>

</html>

效果图
在这里插入图片描述
我没有给p设置外边距，结果却出现上下外边距为16px，这就是浏览器默认的

style里添加来清除内外边距

  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>

效果图
在这里插入图片描述

WinFang5

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
清除内外边距

为什么要清除默认的内外边距。网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距。方法* { padding: 0; margin: 0;}注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e
复制链接

扫一扫