CSS margin的含义

本文详细解释了CSS中margin属性的概念及应用。介绍了margin作为元素边距的意义,并通过实例说明了其在网页布局中的作用,帮助读者理解如何利用margin来精确控制元素的位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

margin为边距的意思,然而边距是要有参照物的,也就是谁的边距谁多远,可以用下面的图简明的表示出来:

 哈哈,上面是一个字啊,没办法,优快云 blog画不了图也贴不了图,只能用“回字”表示了,就是两个矩形,外面大矩形套里面小矩形,假设两个矩形分别叫A和B,A包含B

B的margin就是B的四条边到A的四条边的距离,也就是有四个margin:margin-top,margin-right,margin-bottom,margin-left,在CSS中就是这样命名的,而且如果只用margin代替这四个,顺序就按照我写的这个顺序,上-右-下-左,顺时针方向

已经知道了margin的四种类型和含义,但是为什么必须是要有包含关系呢?

其实页面文档是由许多容器组成的,<body></body>是一个容器,<table></table>也是一个容器,等等。只要是封闭的标签都可以看作容器,这就很好的说明了margin:即一个容器的边距包含它的容器的边的距离,这样就很好的定位了它的位置,整个页面的显示也就有数据可依了,也就有条不紊了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值