底部边距无效。

Question

我正在尝试将加载图像位置放在页面右下角，但除了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> 

有人能告诉我这是什么或者如何使其工作吗？ 谢谢

- Skan So

Answer 1

这与边距和填充的特性有关。由于边距位于元素外部，除非后面还有其他元素，否则它们不会被渲染出来。您可以在父元素上使用底部1像素的填充；这应该会触发渲染。

- Xorandnotor

---

我也会这样做！甚至更好的方法是，删除内部元素的边距，并将其作为外部元素的填充添加。 - GreyRoofPigeon

Answer 2

你应该使用绝对定位，并使用 bottom 和 right 属性。 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>

- Federico Ginosa

Answer 3

我曾遇到一个情况，需要添加display: inline-block。

我无法解释为什么这样做有效，但它确实有效！ :-) 希望能帮助到某些人。

- mpelzsherman

Answer 4

如果您想将其放在页面右下角，只需使用以下CSS：

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

如果你想改变像素的数量，将0更改为你想要的数字即可。

- Hive7

Answer 5

尝试使用绝对定位，并使用底部/右侧代替相应的边距：

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

Here - http://jsfiddle.net/maximua/SKcvr/

- Max Malyk

Answer 6

即使将父元素和子元素的display:block设置为块级元素，底部的外边距可能仍然无法生效。解决这个问题的最好方法是，在使用填充和大的上边距值进行测试后，为父容器使用position:relative;，为子div使用position:absolute;。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 中，我只考虑最相关的属性。您可以添加颜色、背景、字体等，这不会影响布局。我只编码了关键属性来创建“效果下边距”。

更多花哨的示例。

- limakid