CODEWITHSUNDEEP
htmlcssclassfonts
Razzie
Razzie

Reputation: 47

How to prevent p tag causing gap (new line)

I'm using the below <p> but it causes a gap between the tick the text after the </p>

<p class="tick">✓</p> Post messages to friends all over the world.

CSS:

.tick {
  font-size: 12px;
  color: green;
  font-weight: bold;
  line-height: normal 
}

This is what it looks like:

✓

Post messages to friends all over the world.

but I want it all on the same line instead.

Any ideas?

Upvotes: 0

Views: 393

Answers (3)

gajewsky
gajewsky

Reputation: 97

display: inline; will do the trick.

.tick { 
  display: inline;
  font-size: 12px;
  color: green;
  font-weight: bold;
  line-height: normal;
}

But i think that better approach would be do this in unordered list with custom li bullets.

Upvotes: 2

fDruga
fDruga

Reputation: 269

Check this fiddle: http://jsfiddle.net/h4n2sstq/

The first example is obiously your original entry - not good. In the second example i put the text inside the p tags so they align correctly.

<p class="tick">✓ Post messages to friends all over the world.</p>

If you don't want to put the text inside the p tags just add a css rule for the tick span with an inline-block or just inline display property.

display: inline-block;

Good luck!

Upvotes: 0

Johannes Reuter
Johannes Reuter

Reputation: 3547

The answer of vegijtha works, but you shouldn't use the p-tag here. They have the semantic meaning of a paragraph of text - use a span-tag instead.

<span class="tick">✓</span> Post messages to friends all over the world.

Upvotes: 2

Related Questions