关于ul中出现默认的margin和padding值及解决办法

最新推荐文章于 2022-09-01 20:09:19 发布

没有头发的可怜人

最新推荐文章于 2022-09-01 20:09:19 发布

阅读量7.2k

点赞数 5

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_45794542/article/details/107154137

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在浏览器中ul会有默认的margin和padding值

<style>
.top {
        width: 500px;
        height: 400px;
        border: solid black 1px;
      }
 .top li {
        width: 50px;
        height: 30px;
        border: black solid 1px;
        /* float: left; */
      }
 </style>
<body>
	<div class="top">
          <ul>
            <li>li</li>
            <li>li</li>
          </ul>
    </div>
</body>

ul出现的默认值
大家可以看到，在代码中并未设置外内边距，在div中的ul的左边和上边出现了距离。
在这里插入图片描述

上下外边距为16px，左内边距为40px；这是由于ul在浏览器中有默认值。由
margin-block-start: 1em;//上边距，相对于字体的大小
margin-block-end: 1em;//下边距
padding-inline-start: 40px;//左内边距
造成的。

解决方案

在css的开头使用如下代码就可以解决了。当然，在ul中添加也可以哟

* {
        margin: 0;
        padding: 0;
      }

注意：当选择器是body时不能去掉默认值(小编最开始就是用了body，才发现的了这个问题)

没有头发的可怜人

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
关于ul中出现默认的margin和padding值及解决办法

在浏览器中ul会有默认的margin和padding值<style>.top { width: 500px; height: 400px; border: solid black 1px; } .top li { width: 50px; height: 30px; border: black solid 1px; /* float: left; */ }
复制链接

扫一扫