無法提供保證金的時間元素

這裏是我的html代碼：無法提供保證金的時間元素

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>CSS Article3</title> 
     <link rel="stylesheet" type="text/css" href="css/article3.css"> 
    </head> 
    <body> 
     <time datetime="2015-11-23">November 23 2015</time> 
    </body> 
    </html>

這裏是我的CSS代碼：

time{ 
     border: 1px solid black; 
     margin-top: 30px; 
     }

我想給這個時間元素在頂部的餘量。把它拖下來，但不管我付出多少保證金，它都坐在那裏。我給的餘量也超出頁面的頂部，而不是推下這個元素。我可以填充身體並完成它，但爲什麼我不能通過給時間元素留出空間來做到這一點。

來源

2016-05-06 Ravy

這是inline元素是如何工作的。使它成爲一個block元素或inline-block元素，使其工作：

time { 
    display: inline-block; 
    margin: 30px; /** now work **/ 
}

https://jsfiddle.net/u9k04tv6/1/

來源

2016-05-06 12:24:16

只需設定時間position: absolute;

time{ 
    border: 1px solid black; 
    margin-top: 30px; 
    position: absolute; 
}

https://jsfiddle.net/u9k04tv6/

來源

2016-05-06 12:21:42

沒有一個很好的解決方案。這很棘手，會導致內容問題。如果您瞭解它的工作原理，請使用絕對位置。 –

@MarcosPérezGude是的，我知道如果你不知道如何使用它，它可能是內容的問題，但在這種情況下，他只想從文檔中獲得'margin-top'（至少我能從問題），所以它會抓住第一個相對/絕對父母或html標籤。這就是爲什麼在這種情況下我使用'position：absolute'，因爲它將被定位爲參考html標籤。我不是CSS的專家，我正在自學，所以如果我說錯了什麼，請糾正我。 –

如果'margin'與'position：absolute'一起工作，這是因爲絕對定位從正常流程中拉出元素並將其轉換爲塊元素**，所以邊距工作，但是當OP將嘗試將代碼添加到一個真實的項目，都可以崩潰。只需轉換爲塊元素，不要改變位置，這不適用於這類事情。在你的學習過程中祝你好運:) –

time似乎是一個內聯元素。內聯元素不考慮邊距設置。

更改時間元素的display到inline-block或block

來源

2016-05-06 12:24:16 HerrSerker

這是正確的。內聯元素不會影響行邊距和填充的高度。 –

無法提供保證金的時間元素

回答

相關問題