请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
CSS的margin属性用于设定元素的外边距，试看下面的示例：粉色矩形基于红色边框矩形的左外边距为100px：
对于粉色矩形而言，左边外边距设置为100px，它离红色边框矩形左边边线的距离就是100px，这就是外边距的作用：对于设定外边距 margin 属性值的元素而言，外边距的值会迫使它在四个方向与父元素拉开margin所设定的四个方向的margin值的距离。
margin属性可以设定四个方向的值，比如上例，粉色矩形的margin属性如此设置：
margin: 0 0 0 100px;
四个方向的值用空格隔开，顺序是 上 右 下 左。如果四个值设置成一样，写成：margin: 100px; 。如果上下一样、左右一样，写成：margin: 50px 100px;。我们还可以单独设置某个方向的margin值，比如只设定左边的外边距，写成：margin-left: 100px;，其余没有定义的，默认为0。另外的四个方向分别是：margin-top（上）、margin-right（右）、margin-bottom（下）。
可以利用 margin 属性定位子元素在父元素中的位置。上例中，粉色子元素高宽为100*100，设父元素的尺寸可能是不确定的，现在，假设我们想让粉色子元素在父元素的水平方向居中，粉色的margin属性可以这么设置：
margin: 0 0 0 calc(50% - 50px);
或者：
margin-left: calc(50% - 50px);
效果：
那么，假设上面的红色边框矩形就是我们论坛里的帖子正文的容器，那么，我们可以用上述方法给帖子做水平定位，即设置 margin-left 的值。不过，悲催的是，论坛的结构要比上例复杂，帖子的父容器建立在或者就是 table 标签，我们帖子的父亲——父元素——不那么明晰，所以要在上例的基础上做些改变，其实也就是在计算当中纳入帖子左边框，亦即用户头像所在的边框，其尺寸必须包含在计算中。目测其宽度为162px，它的一半即 81px 加入到 calc() 计算函数内即可：
margin-left: calc(50% - 帖子宽度的一半 - 81px);
例如，如果帖子的宽度为 1000px，则：
margin-left: calc(50% - 581px);
也可以直接使用定位属性 left 值来设定帖子居中：left: calc(50% - 581px);
margin 和 left 都可以居中帖子，margin的好处主要在本地测试和论坛发布保持基本一致，本地测试时帖子是可以看全的，left在本地就会有一部分看不到。 | 
发表于 2022-11-6 09:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-11-6 09:56
发表于 2022-11-6 10:37
楼主
