边距折叠相邻元素

Question

我对 margin collapse 及其工作原理做了一些研究，但大多数示例都使用父子情况。我想要留白的元素 (div) 没有父元素。

<center>
                    <h2>Profile</h2>
                    Username goes here<br>
                    Balance: 0.00 <div class="coin coin-1"></div>
</center>

.coin
{
    display:inline-block;
  margin-top:5px; /*Problem here*/
    background: url('http://infrox.us.lt/coin.png');
    background-size:cover;
    background-repeat:no-repeat;
}
.coin-1
{
    height:25px;
    width:25px;
}

我需要使图像 div (.coin) 比其余文本稍低一些。相反，它将 div 与其旁边的文本一起移动。如何只移动图像 div?

Answer 1

对行内块元素使用 vertical-align。

.center {
  text-align: center;
}
.coin {
  display: inline-block;
  margin-top: 5px;
  /*Problem here*/
  background: url('http://infrox.us.lt/coin.png');
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: bottom;
}
.coin-1 {
  height: 25px;
  width: 25px;
}

<div class="center">
  <h2>Profile</h2>
  Username goes here
  <br>Balance: 0.00
  <div class="coin coin-1"></div>
</div>

如果这还不够，您可以使用相对定位来调整元素位置，例如...

.coin
{
  position: relative;
  top: 20px;
}

这会将元素向下 20px。

JSfiddle

顺便说一句：<center> 已被弃用，是一个过时的元素。

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

边距折叠相邻元素

Margin collapse adjacent elements

html

css

margin