当前位置: 首页 > >

css 去除标签中最后一个子元素的margin(3种方式)

发布时间:

最*遇到的在布局的时候,最后一个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

















主要有三种方式:
方式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;
}

最后展现形式就是这样的:

简而言之,就各种标签获取的方式不同。



友情链接: