Using margin / padding to space from the rest of the

Question

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

put a bit of margin-top between the and the rest of the text — sam, Mar 27 '13 at 16:56
add `display: block` to your span css, the spacing takes effect http://jsfiddle.net/BqTUS/1/ — tymeJV, Mar 27 '13 at 16:57

Peter Rasmussen · Accepted Answer · 2019-06-29T07:26:37.840

67

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

edited Jun 29 '19 at 07:26

answered Mar 27 '13 at 17:00

Peter Rasmussen

16,474
7
46
63

1

"display:block;" is absolutely the correct and simple situation here. – tfont Jul 17 '16 at 16:28
6

If you want a block element as opposed to an inline element, shouldn't you just use a block element like
?
– Mike Oct 13 '16 at 23:19
3

shouldn't it be `display: inline-block;`? – Kai Carver Jun 12 '19 at 20:00

score 27 · Answer 2 · answered Mar 27 '13 at 16:59

27

Add this style to your span:

position:relative; 
top: 10px;

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

answered Mar 27 '13 at 16:59

Eli

14,779
5
59
77

score 11 · Answer 3 · answered Mar 25 '16 at 07:36

11

Try in html:

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

or in css:

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

answered Mar 25 '16 at 07:36

MagTun

5,619
5
63
104

score 2 · Answer 4 · answered Mar 27 '13 at 17:00

2

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

answered Mar 27 '13 at 17:00

Floremin

3,969
15
20

score 2 · Answer 5 · answered Mar 27 '13 at 17:03

2

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

answered Mar 27 '13 at 17:03

gaynorvader

2,619
3
18
32

2

By adding `line-height` you won't effect the rest of the flow of your html document. Adding `inline-block` to your element will be force to follow width constraints if addition elements where to follow to the right of your span. You stated you wanted to "space the name out a little bit so i applied margin". Margins will only apply to TOP, BOTTOM etc of your element. Whereas line-height will keep the spacing correct even when your text wraps to the next line. I've 1 UP'd this as the answer as it is technically correct if the text wraps and you if need space between names and each name line. – phanf Sep 03 '15 at 20:36

score 0 · Answer 6 · answered Mar 27 '13 at 16:59

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

Using margin / padding to space from the rest of the

6 Answers6