边距底部不起作用答案

【问题标题】：margin-bottom doesn't work边距底部不起作用
【发布时间】：2013-08-22 23:06:15
【问题描述】：

我正在尝试将加载图像放置在页面的右下角，但除了 margin-bottom 之外一切正常。

<div id="preload">
    <div align="right" style="margin-bottom:40px; margin-right:50px;">
        <img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
        <br>
        <a style="color:#00ff24;"><b>Please wait while the page is loading...
        <br>If the website doesn't load within one minute please refresh your page!</b>                                                                                                 
        </a>
    </div>
</div>

谁能告诉我什么或如何使它工作？谢谢

【问题讨论】：

标签： html css alignment margin

【解决方案1】：

这是边距与内边距的本质。由于边距位于元素之外，除非后面有另一个元素，否则它们不会呈现。您可以在父级上使用 1px 的底部填充；这应该会触发渲染。

【讨论】：

我也会这样做！或者更好的是，删除内部元素的边距并将其作为填充添加到外部元素。

【解决方案2】：

您应该分配绝对位置并使用底部和右侧属性。

http://jsfiddle.net/7yrUy/

<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
    <img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
    <br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>

【讨论】：

【解决方案3】：

尝试绝对位置并使用底部/右侧而不是各自的边距：

<img src="http://thc-racing.ucoz.com/design/loading.gif" alt=""  style="position: absolute; bottom:40px; right:50px;"/>

这里 - http://jsfiddle.net/maximua/SKcvr/

【讨论】：

【解决方案4】：

如果你想在页面的右下角使用这个 css：

.yourClass {
    position: absolute;
    right: 0;
    bottom: 0;
}

如果你想改变像素的数量，把 0 改成你想要的

【讨论】：

【解决方案5】：

我有一个案例需要添加display: inline-block。

我无法解释为什么这会奏效，但它确实奏效了！ :-) 希望它对某人有所帮助。

【讨论】：

【解决方案6】：

即使将 display:block 设置为父 div 和子 div，margin 底部也可能不起作用。在使用填充和大边距顶部值进行测试之后，解决此问题的最佳方法是使用 position:relative; 作为父容器，使用 position:absolute; 作为子 div。 div等元素已经有默认的display-block，我们不需要声明，如下：

.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}

.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}

在 HTML 中只考虑：

<header class="parent"> 
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>

在 CSS 中，我只考虑最相关的属性。您可以添加颜色、背景、字体系列等，不会影响布局。我刚刚编写了关键属性来创建“效果边距底部”。

Example more fancy.

【讨论】：