разница между 2 пядью

Question

У меня есть следующий код:

<div class='relative'> 
    <span>MyText</span><br> 
    <span class="btnFavorit btnViolet" idp="005626"> 
      <span class="l">&nbsp;</span><span class="c"> <img class="imageOff" src="./charte/base/mesCourses/pictoFavorit.png"><img class="imageOn" src="./charte/base/mesCourses/pictoFavoritOn.png">BUTTON</span><span class="r">&nbsp;</span> 
      </span> 
    </span> 
</div> 

Я хотел бы поставить маржинальное дно на первый пролет, чтобы иметь пространство между текстом и моей кнопкой (сделанный пролетом). Как я могу это сделать (для меня, я думаю, я буду использовать другие
, но я не знаю, могу ли я использовать CSS для этого)

Answer 1

Это должно работать

.relative span { display: inline-block; } 
.relative span:first-child { margin-bottom: 10px; } 

Answer 2

Просто добавьте класс первого интервала, дать ему медийное свойство как inline-block или block и положить запас :-)

.textSpan{ 
    display:inline-block; 
    margin-bottom:5px; /*increase if you want*/ 
} 

Почему только маржа не работает span? Span элемент inline в отличие от блочных элементов, таких как p, div, следовательно, вы должны специально дать ему пользовательское свойство отображения как block или inline-block

http://jsfiddle.net/wk483kzL/

Answer 3

Пролет тег должен быть использован для встроенных элементов ТОЛЬКО. Лучшим решением было бы изменить диапазон MyText на div, так как это ваш желаемый эффект.

<div>MyText</div> 

Answer 4

Используйте некоторые вещи, как это ..

<style> 
.relative span:first-of-type { display:inline-block;margin-bottom:10px; } 
</style> 

Answer 5

Вы можете иметь больше пространства между этими пролетами. Вы можете установить правила CSS, чтобы сделать это:

br { 
line-height:10px; 
} 

или

br { 
margin: 15px 0; 
display: block; 
} 

Это изменит все БРС на вашей странице. Добавить класс бр, чтобы иметь CSS конкретные только в одном месте:

<span>MyText</span><br class="gap"> 

, а затем использовать CSS:

br.gap { 
margin: 15px 0; 
display: block; 
}