Question

这是我的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;
         }

我想给这个时间元素一个保证金。把它拖下来，不管它给我多少余量，它只是坐在那里。我给出的余量超出了页面的顶部而不是推动这个元素。我可以给身体填充并完成它，但为什么我不能通过给时间元素留出余量。

Answer 1

inline元素的工作原理。将其设为block元素或inline-block元素，使其正常工作：

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

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

Answer 2

time似乎是一个内联元素。内联元素不尊重边距设置。

将时间元素的display更改为inline-block或block

Answer 3

只需使用position: absolute;

设置时间即可

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

https://jsfiddle.net/u9k04tv6/

无法给予时间元素保证金

3 个答案: