最近遇到的在布局的时候,最后一个margin不想要,虽然很简单,但还是想总结一下。
先上公用代码:
css
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
width: 1200px;
margin: 0px auto;
}
li {
list-style: none;
}
ul {
width: 200px;
border: solid 1px green;
margin: 100px auto;
padding: 20px;
box-sizing: content-box;
}
li {
height: 100px;
width: 200px;
border: solid 1px red;
}
html
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
主要有三种方式:
方式1:
last-child
li {
margin-bottom: 10px;
}
li:last-child {
margin-bottom: 0px;
}
方式2:
li + li
li+li {
margin-top: 10px;
}
方式3:
not(:last-of-type)
li:not(:last-of-type) {
margin-bottom: 10px;
}
最后展现形式就是这样的:
简而言之,就各种标签获取的方式不同。