margin到底相对于谁？

问题描述：

下面这段代码中#left和#right绝对定位到了#main的两边。

#main中的

margin: 0 210px;

为什么这里margin外边距的效果是相对于父元素，而不是相对于#left和#right呢？

相关代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>margin</title>
<style type="text/css">
html,
body {
margin: 0;
height: 100%;
}
#left,
#right {
position: absolute;
top: 0;
width: 200px;
height: 100%;
}
#left {
left: 0;
background: #444444;
}
#right {
right: 0;
background: #444444;
}
#main {
margin: 0 210px;
height: 100%;
}
</style>
</head>

<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>

</html>

weixin_慕后端1383225 2022-06-01

源自：浮动与定位 1-1 课程简介

收起

1回答

好帮手慕星星 2022-06-02 09:42:49

同学你好，margin具体值不相对于其他元素，就是给元素自己设置的，但是看起来相对于父元素

而#left和#right设置了绝对定位，脱离文档流，加上方向位置，所以会盖在#main元素上面。

祝学习愉快！

收起回答

提问者 weixin_慕后端1383225 #1

那请问，在下面这段代码中为什么margin看上去是相对于#left和#right呢？是因为设置了浮动的原因么？
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>margin</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
#left,
#main,
#right {
float: left;
width: 300px;
height: 300px;
background-color: aqua;
}
#main {
margin: 0 100px;
}
</style>
</head>

<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>

</html>

2022-06-02 11:29:40
好帮手慕星星回复提问者 weixin_慕后端1383225 #2

是的，因为三个元素都设置浮动，脱离文档流，在同一水平面，所以看起来main是相对于#left和#right设置的间距。

2022-06-02 13:09:19