Menu
Ive got a block of text, and i want to write the authors name and date bellow it in small italics, so i put it in a <span> block and styled it, but i want to space the name out a little bit so i applided margin (also tried padding) to the block but it cant get it to work.
Ive made a jsfiddle of the issue - HERE
The html looks like
<p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. <br><span>Author Name, Year</span> </p> The CSS
p {font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;} p span {font-size:16px; font-style: italic; margin-top:50px;} 
985
Since span tags are inline, not block elements. They can only take margin left and right, not top and bottom.
Is it Better to Use Margin or Padding? Use a margin when you want to adjust the spacing of an element and use padding when you want to adjust the appearance of the element itself. Margins aren't a part of the element; padding is.
Since span elements are inline elements by default, horizontal margins are ignored for them by the spec. You can make them inline blocks (supported by most, but not all, browsers), or use padding instead of margin.
Overall just add display:block; to your span. You can leave your html unchanged.
Demo
You can do it with the following css:
p { font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased; margin-top:0px; } p span { font-size:16px; font-style: italic; margin-top:20px; padding-left:10px; display:inline-block; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
