CSS的margin: 7px auto 10px含义是什么？

问题描述

问 题

CSS的margin: 7px auto 10px中auto是距上面7PX,左右居中，距下10PX的意思嘛？主要弄不清楚auto，请解答，谢谢

解决方案

举个例子，

margin: 10px 20px 30px 40px

以上表示的其实是：

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

即顺序为：上、右、下、左；

如果写三个值，表示该值和对边的值相等，比如：

margin: 10px 20px 15px;

表示的意思是：

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;

再回到本题中具体的问题：

margin: 7px auto 10px

表示的意思自然是：

margin-top: 7px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;

对于块级元素而言，当其margin-right和margin-left为auto时，便会在父盒子内水平居中显示，这也是让元素水平居中常用的一种方法。

这篇关于CSS的margin: 7px auto 10px含义是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！