为什么我的这个练习代码里，li 元素中间会多出来一部分空隙。这个是如何产生的呢？

这个空隙如何取消掉呢？

截图

http://take.ms/8NHKB

练习代码

codepen

zozorz

2016-04-18

源自：十天精通CSS3 5-5

关注问题我要回答

1209

操作

收起

3 回答

慕斯9627782
2016-06-06

第一个<li>会相对<ul>缩进一定的像素，是<li>自带的<padding>属性。所以一般写网页的时候，会在先初始化样式，最简单的就是在CSS里面先写一个*{margin:0;padding:0;}

1 回复有任何疑惑可以回复我~

收起回答

勇敢的心9
2016-04-20

你设置的这个::before 产生的效果，在盒子之间造成间隙

0 回复有任何疑惑可以回复我~

收起回答

zozorz 提问者

是的，通过 ::before添加元素进去后产生了间距。但这个是因为元素的 margin 造成的吗？还有一个没搞懂的是before 的css 中已经设置了 position:absolute。理论上应该不会由于 margin 影响到两边的 li 才是

2016-04-22 回复有任何疑惑可以回复我~

勇敢的心9
2016-04-18

在 .nav-bar ul li 加如下代码，不知道是不是你要的效果，我是新手，不喜勿喷

margin-left:-5px

0 回复有任何疑惑可以回复我~

收起回答

zozorz 提问者

呵呵，谢谢你的热心回答。通过 margin-left:-5px 是可以让消除空隙。不过我的疑问是根据盒模型，通过属性设置，这个空隙到底是怎么产生的。

2016-04-20 回复有任何疑惑可以回复我~

0/150

提交

取消

十天精通CSS3

参与学习 242658 人
解答问题 2623 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

进入课程

本课相似问答

6 回答:first-child的意思是，如果这个元素是它的父元素中的第一个子元素，那么就把它选上，是这么理解吧？

1 回答这个<li>后面的伪元素是不是包含在<li>中?

8 回答ul的第一个子元素不是第一个<li>么？

5 回答假如ul的第一个子元素不是li，而是p，为什么就没有效果了？

1 回答我做出来的为什么是这样子呢？我反复对比了参考的代码，我找不出哪里不一样来

搜索更多本课相关问答

为什么我的这个练习代码里，li 元素中间会多出来一部分空隙。这个是如何产生的呢？

我要回答关注问题

热搜

最近搜索清空

为什么我的这个练习代码里，li 元素中间会多出来一部分空隙。这个是如何产生的呢？

3 回答

本课相似问答

为什么我的这个练习代码里，li 元素中间会多出来一部分空隙。这个是如何产生的呢？