CODEWITHSUNDEEP
cssmarginpaddinghtml
sam
sam

Reputation: 10084

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

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

Upvotes: 52

Views: 215870

Answers (6)

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

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

Upvotes: 71

MagTun
MagTun

Reputation: 6185

Try in html:

style="display: inline-block; margin-top: 50px;"

or in css:

display: inline-block;
margin-top: 50px;

Upvotes: 11

gaynorvader
gaynorvader

Reputation: 2657

Try line-height like I've done here: http://jsfiddle.net/BqTUS/5/

Upvotes: 2

Floremin
Floremin

Reputation: 4089

Use div instead of span, or add display: block; to your css style for the span tag.

Upvotes: 2

brbcoding
brbcoding

Reputation: 13596

JSFiddle

HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium. Nisi eius deleniti voluptates quis esse deserunt magni eum commodi nostrum facere pariatur sed eos voluptatum?

</p><span class="small-text">George Nelson 1955</span>

CSS:

p       {font-size:24px; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;}
p span  {font-size:16px; font-style: italic; margin-top:50px;}

.small-text{
font-size: 12px;
font-style: italic;
}

Upvotes: 0

Eli
Eli

Reputation: 14827

Add this style to your span:

position:relative; 
top: 10px;

Demo: http://jsfiddle.net/BqTUS/3/

Upvotes: 29

Related Questions