Using margin / padding to space <span> from the rest of the <p>

css, html, margin, padding

Solution

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;
}

Problem

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;} ```

Original source