Приподнять блок слова на 10px

Question

Необходимо приподнять слово на 10px как на фото:

Сам блок out-6

<p class="out-6">
Граф Дра́кула (англ. Count Dracula) — вампир, заглавный персонаж и главный
<span class="s-6">антагонист</span>
романа Брэма Стокера «Дракула» (1897). В качестве архетипического вампира 
Дракула появлялся во множестве произведений массовой культуры, даже не имеющих 
непосредственного отношения к роману Брэма Стокера.
</p>

Answer 1

Элементы с position: relative остаются там где были, но теперь к ним можно применять абсолютное позиционирование, в нашем случае top.

span {
  top: -10px;
  position: relative;
}

<p>Граф Дра́кула (англ. Count Dracula) — вампир, заглавный персонаж и главный <span>антагонист</span> романа Брэма Стокера «Дракула» (1897). В качестве архетипического вампира Дракула появлялся во множестве произведений массовой культуры, даже не имеющих непосредственного отношения к роману Брэма Стокера.</p>

Answer 2

Можно использовать transform: translateY(-10px), но перед этим нужно, чтобы к блоку можно было применять блочные свойства. Для этого можно ему задать display: inline-block

.sup {
  display: inline-block;
  transform: translateY(-10px);
}

<p>Граф Дра́кула (англ. Count Dracula) — вампир, заглавный персонаж и главный <span class="sup">антагонист</span> романа Брэма Стокера «Дракула» (1897). В качестве архетипического вампира Дракула появлялся во множестве произведений массовой культуры, даже не имеющих непосредственного отношения к роману Брэма Стокера.</p>

Answer 3

Почему бы вам не использовать для этого vertical-align?

.s-6 {
  vertical-align: super;
}

<p class="out-6">
Граф Дра́кула (англ. Count Dracula) — вампир, заглавный персонаж и главный
<span class="s-6">антагонист</span>
романа Брэма Стокера «Дракула» (1897). В качестве архетипического вампира 
Дракула появлялся во множестве произведений массовой культуры, даже не имеющих 
непосредственного отношения к роману Брэма Стокера.
</p>

БЛОГ НА HUSL

Приподнять блок слова на 10px

Ответы (3 шт):