Ravy Ravy - 7 months ago 10
HTML Question

unable to give margin to time element

Here's my html code:

<!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>


and here is my CSS code:

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


I want to give this time element a margin at top. To drag it down but it just sits there no matter how much margin I give. Also the margin that I give goes beyond the top of the page instead of pushing this element down. I can give padding to the body and get it done but why cant I do this by giving a margin to the time element.

Answer

That's how inline elements works. Make it a block element or an inline-block element to make it work:

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

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