Top and Bottom margins/paddings do not effect inline nonreplaced elements

Margins or paddings applied to an inline non -eplaced element will have absolutely no effect on the line height. the only properties that effect the distance between lines containing only text are line-height, font-size, and vertical-align.

by fezec

HTML

<p>This paragraph has an <span class="margined">inline element</span> with margins</p>


<p>This paragraph has an <span class="padded">inline element</span> with margins</p>

SCSS

p{
    margin:0;
    padding:0;
    border:1px dashed black;
}

span.margined{
     border:1px dashed black;  
    margin:1em;
}

span.padded{
    border:1px dashed black;  
    padding:1em;
    background:red;
}