用CSS添加页边距

我想在一些“泡泡语音”之间添加一些空格。用CSS添加页边距

我有一个演示here

我认为，将边缘底的工作，但事实并非如此。

任何人都可以帮助我。在此先感谢

.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

来源

2013-10-23 Diego

如果您想使用下边距，这里的工作例子，只是复制和粘贴

.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-23 17:08:56 David

它确实有效。不同的是，我没有显示选项 – Diego

中的内联块。我只需要删除顶部：10px选项 – Diego

@Diego：这是一个基本的HTML概念。请尝试理解它们，而不是仅仅复制/粘贴。 – bluejamesbond

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

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

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

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

来源

2013-10-23 17:04:31 Andrew

将该代码提交给.quote_speech：

.quote_speech { 
    margin-bottom: 20px; 
}

来源

2013-10-23 17:05:40

添加margin-top到.bubble

.bubble { 
    margin-top: 25px; 
    }

来源

2013-10-23 17:06:13

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

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

作为一个侧面说明 - 您已经有了大量的冗余/非必要的CSS。 display: inline是默认的一个元素，position: relative是没有必要的，除非你正在做的一个元素中的一些定位，clear: both是没有必要的，因为你没有浮动任何东西....

最后，最好的这样恕我直言，以获得下边距为响应是改变以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; 
}

来源

2013-10-23 17:07:08

它没有。我仍然需要阅读更多内容和泡泡之间的关系。我有top：10px，因为我需要Copmany名称和Read More之间的空间 – Diego

@Diego - 做了一个编辑，以显示内联块给你你想要的。 –

@ cale_b-这里是新的[版本]（http://jsbin.com/uLuvaWU/9）。与大卫Khasikyan解决方案。我想你是对的，“你有吨冗余/非必要的CSS”不是一个CSS大师，去检查你的解决方案 – Diego

简单:-D

变化display:inline;到display:inline-block;在.more类。

现在你可以把边缘，高度和其他东西混淆了！

来源

2013-10-23 17:16:38 bluejamesbond

@cale_b抱歉没有看到您的回复。为雅+1 – bluejamesbond

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

来源

2013-10-23 17:17:02

我只是改变了更多的链接的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-23 17:22:14 FiLeVeR10

你的代码设置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-23 17:26:38

用CSS添加页边距

回答

相关问题