为什么给ul设置了padding为0之后直接向左对齐了，盒子大小没有发生任何变化？

慕神0996557 2020-03-18

源自：动态文章列表效果 2-2 CSS的盒子模型

25

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2020-03-20 09:46:00

同学你好，问题解答如下：

1、文字默认是左对齐显示的

2、ul元素只有左侧的padding值

所以给ul设置padding为0之后，左侧内边距就没有了，但是实际占据宽度会改变。原来占据宽度为200+40=240，现在就是200了。

自己可以再测试理解下，祝学习愉快！

好帮手慕糖 2020-03-19 13:34:39

同学你好，不止是ul有边距，body也是有的，所以还是会有间距的。

都清除之后，上边与左边才会贴着浏览器窗口显示。

祝学习愉快~

提问者慕神0996557 #1

老师你好，这是我的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>imooc</title> <style> ul { width:200px; height:400px; background-color:yellow; list-style:none; border-top:1px dashed black; padding:0px; } </style> </head> <body> <ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> </body> </html> 不知道是不是我没说清楚，我的意思是这段代码里写了padding为零之后，文字就会左对齐，但是padding设置为零的话不应该是ul盒子的上下左右内边距都是0 吗，为什么文字是左对齐了（说明左边内边距是0），而不是右，上下都会跟文字对齐

2020-03-19 19:56:35

好帮手慕糖 2020-03-19 09:07:48

同学你好，li也是有边距的，且不一定是内边距，也可能是外边距。建议：可以直接通过通配符设置内外边距为0，例：

若还是无法解决，建议：直接将代码粘贴过来，便于准确的定位与解决问题。

祝学习愉快~

提问者慕神0996557 #1

谢谢回复，我上面的截图是老师的视频里演示的内容，那些css属性全都是设置给ul标签的，我的意思是给ul标签设置了padding为零，那不是上下左右内边距都是0了吗，为什么ul那个盒子大小没变化，只有文本内容是向左对齐了

2020-03-19 10:37:04

相似问题

请教老师一下，为什么给外面盒子设置margin后，里面的两个小盒子与大盒子的相对位置没有改变呢？

.active图片居中为什么要设置两种方式？？？

类，elec，是如何实现左对齐的，我使用过 .elec{align:left}没有实现？

右侧登录框的div向左填充30像素有效果，但是查看发现填充前后的宽度没有变化

为什么设置了ul的外边距为auto之后仍然不能居中

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

零基础前端入门体验课

参与学习 7140 人
提交作业 557 份
解答问题 339 个

慕课网首推前端体验课，用体系化的课程+有效的实战练习，带你轻松入门web前端~

本课精华内容

问答作业

内联元素可以用CSS设置为块级元素吗？

149 38

前端还叫做什么？工程化？

167 37

这又是为什么不能显示呀

26 29

用这个软件可以跟到老师的课程学习吗？Adobe Dreamweaver CC 2018

121 25

选中的代码如何快速设置/* */

4 22

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载