Используя margin/padding в пробел <span> из остальной части <p>

У меня есть блок текста, и я хочу написать имена авторов и дату ниже его небольшим курсивом, поэтому я поместил его в блок <span> и ввел его в стиле, но я хочу немного указать название бит, поэтому я применил маркер (также попробовал отступы) к блоку, но он не может заставить его работать.

Ive сделал jsfiddle проблемы - ЗДЕСЬ

html выглядит как

<p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis obcaecati dolore reprehenderit praesentium.
<br><span>Author Name, Year</span>
</p>

CSS

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

Ответы

Ответ 1

В целом просто добавьте дисплей: блок; к вашему промежутку. Вы можете оставить свой HTML без изменений.

демонстрация

Вы можете сделать это с помощью следующего 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;
}

Ответ 2

Добавьте этот стиль в свой диапазон:

position:relative; 
top: 10px;

Демо: http://jsfiddle.net/BqTUS/3/

Ответ 3

Попробуйте в html:

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

или в css:

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

Ответ 4

Используйте div вместо span или добавьте display: block; в ваш стиль css для тега span.

Ответ 6

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