gpt4 book ai didi

css - 赋予 margin-right 值超过其父级宽度

转载 作者:行者123 更新时间:2023-11-28 09:23:47 26 4
gpt4 key购买 nike

HTML:

<body>
<div>
Div
</div>
</body>

CSS:

body{
width: 600px;
height: 600px;
background: red;
}

div{
width:200px;
background:blue;
margin-right:400px;
}

将 margin-right 赋予 div 时到底发生了什么?到底有没有效果?给更多的 margin-right 怎么样,比如 600px。然后会发生什么?

OR 如果您考虑一个完全适合其父级的 div,那就太好了。喜欢:

div{
width:400px;
background:blue;
padding: 98px;
border: 2px solid black;
}

现在将 margin-right 赋予 div 会怎样?

最佳答案

margin-right 本身没有任何问题。你看不到 margin-right 的效果,因为 div 的 'width' 属性导致 div 的边距与 body 的右壁有超过 10px 的距离。因此,它导致 margin-right 属性没有任何视觉效果。

为了查看 margin-right 的效果,删除 width 属性或将其增加到一个值,使 div 右边框靠近 body wall(或将其附加到 body wall)。然后,将 margin-right 设置为更大的值(以使更改更清晰)。这是修改后的代码(以下代码中唯一的变化是我删除了 width 属性以增加 div 的宽度以占据 body 的整个宽度):

fiddle link

CSS 更改:

body{
border: 5px dashed blue;
}

div {
height: 50px;
border: 2px solid red;
border-radius: 5px;
background-color: #308014;
margin-right:100px;
/*margin-left:50px;*/
/*margin-top:10px;*/
margin-bottom:10px;
}

关于css - 赋予 margin-right 值超过其父级宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25971021/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com