1

我试图在一些“泡泡演讲”之间添加一些空间。

我在这里有一个演示

我认为添加边距底部会起作用，但事实并非如此。

任何人都可以帮助我解决这个问题。提前致谢

.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;
}

在此处输入图像描述

4

9 回答 9

4

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

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

作为旁注 - 你有大量冗余/不必要的 css 在那里。 display: inline是 a 元素的默认值，position: relative除非你在 a 元素内部做一些定位，否则clear: both没有必要，因为你根本没有浮动任何东西......

最后，恕我直言，让 margin-bottom 响应的最佳方法是更改display:inline-block​​ a 元素，如下所示：

.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;
}
于 2013-10-23T17:07:08.853 回答
1

如果你想使用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;

}
于 2013-10-23T17:08:56.970 回答
1

简单:-D

改为上课。display:inline;_display:inline-block;.more

现在你可以弄乱边距、高度等等！

于 2013-10-23T17:16:38.547 回答
0

我刚刚更改了更多链接的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/

于 2013-10-23T17:22:14.770 回答
0

您的代码正在设置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。

于 2013-10-23T17:26:38.780 回答
0

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

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

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

或者

.quote_speech {
    ...
    margin-bottom: 20px;
}
于 2013-10-23T17:04:31.043 回答
0

将此代码提供给.quote_speech：

.quote_speech {
    margin-bottom: 20px;
}

于 2013-10-23T17:05:40.033 回答
0

添加margin-top到.bubble 

   .bubble {
    margin-top: 25px;
    }
于 2013-10-23T17:06:13.250 回答
0

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

于 2013-10-23T17:17:02.450 回答