用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添加頁邊距

回答

相關問題