CODEWITHSUNDEEP
htmlcssstylesheet
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Adjust height between two span elements

I am trying to adjust vertical space between two span elements inside a div. I am trying to achieve half of what I am getting from <br/>.

line-height , vertical-align or margin-top. None of it worked for me. Here is the jsfiddle

Upvotes: 1

Views: 314

Answers (2)

danijar
danijar

Reputation: 34185

There is a property named display affecting the application of margin among others. The value of this property defaults to inline for span elements. Therefore there is no margin applied.

Either use a element with another default value like a div box or change the value of the display property of your span elements. I suggest using inline-block because this preserves the text flow capabilities of the span element.

span
{
    display:inline-block;
}

Upvotes: 0

Blender
Blender

Reputation: 298166

<span> elements are inline. You can't put block-level elements like <p> inside of inline elements.

Use <div>s instead of <span>s and your CSS will work just fine:

<div class="signupEmailBox">
    <div class="tag"><p>test data goes here</p></div>
    <div class="smallTextEmail">
                    <p>blah blah blah</p>
                    <p>some text goes here...</p>
                    <p>here some more text data</p>
                    <p>some more text</p>
    </div>
</div>
​

Upvotes: 2

Related Questions