关于<ul>和<li>内外边距的问题

如图为何只设置了ul的上内边距上面的边距变为内边距和li的外边距相加了，底部却没有边距，左边空出来一大块这是怎么回事啊？如果设置ul的padding-left为10px的话上下都没边距了但是右边为何还有边距

VincentGu 2017-09-19

源自：盒子模型 3-29 盒子计算

24

收起

2回答

小丸子爱吃菜回答被采纳获得+3积分 2017-09-19 13:59:22

可以将你的代码粘贴上来，我们需要运行一下代码，更好的去定位你所说的问题！

祝学习愉快！

VincentGu 提问者 #1

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul{ list-style:none; background-color:pink; padding-top:10px; width:50%; margin:auto; } li{ background-color:yellow; margin:10px; } </style> </head> <body> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> </body> </html> 你好老师这个代码我运行了下发现上左右都有10px的外边距为什么唯独下面的边距没有啊

2017-09-19 14:14:56
VincentGu 提问者 #2

非常感谢！

2017-09-19 14:21:01

小丸子爱吃菜 2017-09-19 14:43:49

你需要给ul设置padding：10px;才能显示的完整，只设置padding-top的话，第三个li的下边距也会生效，但是在效果上看不出来，你可以在ul后面在放置一个块级元素，会发现，该元素不会贴合ul元素，那就是因为第三个li的下边距是生效的，但是在页面上因为ul高度没有定值导致没有撑开。

可以给ul设置一个固定的高度，或者padding4个方向都设置。

提问者 VincentGu #1

谢谢老师的回答

2017-09-19 15:01:10

相似问题

关于盒子内部margin的问题

为什么ul会有16px的外边距？

不清除内外边距

设置content内上边距100px和设置top外上边距100px不是一样吗？

关于内边距的问题

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载