*｛margin：0 padding：0｝设定问题

为什么*｛margin：0 padding：0｝设定，body中的块级元素的边距margin和padding还有效？

<!DOCTYPE html>

<html>

<head>

<title>margin外边距</title>

/*按照老师的讲解设定初始边距为零*/

ul,li,body {

margin: 0;

padding: 0;

}

ul{

list-style:none;width:300px;height:400px;

background-color:pink;

padding-top:40px;

}

li{

width:200px;height:50px;background-color:yellow;

/*margin:80px 40px 40px;*/

}

.one1{

margin:80px 40px 40px;

}

.one2{

margin:40px;

}

.one3{

margin-top:40px; margin-left:40px;

}

</style>

</head>

<body>

<ul>

<li class="one3">JavaScript</li>

</ul>

</body>

</html>

------------

案例中的*｛margin：0 padding：0｝不是相当于对body所有元素都作用了吗？为甚么设定*｛margin：0 padding：0｝后，ul和li里的边距属性竟然还有效

花盖梨 2019-03-05

源自：盒子模型 3-24 编程练习

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-03-05 14:16:04

你好同学 , 使用*是给所有元素设置样式的 .但是要注意的是 ,如果在css代码中重新给元素设置了样式 , 那么优先级是大于*里面的样式的 . 例如同学的代码中 , li重新设置了边距 , 所以还是会有边距的哦

祝学习愉快 ,望采纳 .

收起回答

花盖梨提问者 #1

优先级大于*，那为什么*没有失效？反而0px起作用了？

2019-03-05 14:48:46

好帮手慕夭夭 2019-03-05 16:28:28

你好同学 , 你回复的疑问和你刚开始问的问题是相互矛盾的 . 问题是"为什么*｛margin：0 padding：0｝设定，body中的块级元素的边距margin和padding还有效？" 表明同学知道*里面的没有效果 .

但是回复的疑问是*没有失效 . 不知道同学是不是回复时表述错误了 . 再重新梳理一下 .

老师在回复中跟同学说了 , *的优先级比较小 ,所以*里面的是没有生效的 . body里面的margin也没有起效果 , 最终生效的margin是老师第一张截图中的样式 ,因为截图中的样式 ,使用的是类名设置的 ,在代码中 ,它权重最大 . 这里的margin:0并没有生效 ,同学可以自己在浏览器按F12检查一下 ,如下;