margin-left与left、margin-right与right区别

最新推荐文章于 2024-04-15 19:17:28 发布

转载最新推荐文章于 2024-04-15 19:17:28 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

159 篇文章

订阅专栏

本文深入探讨了CSS中margin与padding的区别，以及margin-left、margin-top等与left、top属性在元素定位上的不同作用。详细解析了如何通过这些属性实现元素的精确布局，包括容器的居中技巧。

可扩展为margin-left、margin-top、margin-bottom、margin-right与left、top的区别

margin：0 auto 表示距离顶部0其它按浏览器自适应，margin：10% 20%；表示距离上下10%；左右20%
margin表示外间距，容器外部距离其它容器的间距
padding：表示容易内间距，容器内的内容距离容器本身个边上的间距，不允许使用负值

试容器居中的方式

设置定位：距离顶部top50%，则容器整体距离顶部50%； margin-top: -400px;距离顶部-400px;表示容器的一半大小；刚好居于中间

width:800px;
height:800px;
position: absolute;
top: 50%;
margin-top: -400px;
left: 50%;
margin-left: -400px;