Question

我试图在一些“泡沫言论”之间增加一些空间。

我有一个演示here

我认为添加一个margin-bottom会起作用，但事实并非如此。

任何人都可以帮助我。提前致谢

.quote_speech a.more{
    margin-left: 160px;
    display:inline;
    position:relative;
    clear:both;
    background: #636363;
    color: #fff;
    padding: 3px 10px;
    text-decoration:none;
    margin-bottom:3%;
    top:10px;
}

enter image description here

Answer 1

所有这些答案都忽略了一个简单的问题，导致您的保证金无法按预期运作。

您的css包含top:10px个a.more链接。删除它，你的保证金开始正常工作。

作为旁注 - 你有大量冗余/非必要的CSS。 display: inline是元素的默认值，position: relative是没有必要的，除非你在a元素中进行一些定位，clear: both不是必需的，因为你根本没有浮动任何东西....

最后，恕我直言要获得边缘底部响应的最佳方式是将a元素更改为display:inline-block，如下所示：

.quote_speech a.more {
    background: none repeat scroll 0 0 #636363;
    color: #FFFFFF;
    display: inline-block;
    margin-bottom: 10%;
    margin-left: 160px;
    padding: 3px 10px;
    text-decoration: none;
}

Answer 2

如果你想使用margin-bottom，这是一个有效的例子，只需复制和粘贴

.quote_speech a.more{
    margin-left: 160px;
    display:inline-block;
    position:relative;
    clear:both;
    background: #636363;
    color: #fff;
    padding: 3px 10px;
    text-decoration:none;
    margin-bottom:10%;
    top:10px;

}

Answer 3

简单:-D

在课程display:inline;中将display:inline-block;更改为.more。

现在你可以搞乱边缘，高度等等！

Answer 4

将margin-top添加到“阅读更多”按钮下方的<div class="bubble">。

您还可以将margin-bottom添加到div class="quote_speech">。

.bubble {
    ...
    margin-top: 20px;
}

OR

.quote_speech {
    ...
    margin-bottom: 20px;
}

Answer 5

将此代码提供给.quote_speech：

.quote_speech {
    margin-bottom: 20px;
}

Answer 6

将margin-top添加到.bubble

   .bubble {
    margin-top: 25px;
    }

Answer 7

在quote_speech类中设置paddin-buttom:15px;。

Answer 8

我刚刚更改了css以获取更多链接：

.quote_speech a.more{
    margin-left: 160px;
    display:block;
    background: #636363;
    color: #FFFFFF;
    padding: 3px 10px;
    text-decoration:none;
    margin-bottom:3%;
}

这一切都按预期工作。

http://jsbin.com/uLuvaWU/17/

Answer 9

您的代码正在设置margin-bottom: 0px，这是问题的根源。设置为25px，问题解决了。

.quote_speech {
    width: 20em;
    font-size: 14px;
    line-height: 1.5;
    bottom: -15px;
    right: 170px;
    margin-bottom: 25px;
    margin-left: 75px;
}

毕竟，当你将0设置为某个值时，请不要放置px，让它像这样：margin-bottom: 0。

使用CSS添加保证金

9 个答案: