CODEWITHSUNDEEP
htmlcss
EducateYourself
EducateYourself

Reputation: 979

CSS tricks - Get rid of the top and bottom spaces between the text and div border

I have a text inside a div. All I want is to get rid of the top and bottom spaces between the text and div border. Could you please help me.

HTML:

<div id="text">APPLE</div>

CSS:

#text {
float:left;
font-size:3em;
color: black;
}

Upvotes: 1

Views: 122

Answers (4)

RRZ
RRZ

Reputation: 66

you can try this also...

#inner{
     margin: -8% 0px -8% 0px;
}

<div id="text">
   <div id="inner">APPLE</div>
</div>

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

Twy with em unit. It is relative to the font-size of the element. Try with - 

#text {
  float:left;
  font-size:3em;
  color: black;
  line-height: .7em;
}

It will automatically calculate depending on the font size.

Upvotes: 0

Aaron
Aaron

Reputation: 10450

you'll need to play around with the line-height http://jsfiddle.net/ysqs6veu/

For simplicity I've used percentage in the height so this should work for all your font sizes.

#text {
    float:left;
    font-size:3em;
    line-height: 65%;
    color: black;
}

Upvotes: 4

wikijames
wikijames

Reputation: 192

Use " Line-height property" . it will work.

#text {
  float: left;
  font-size: 3em;
  color: black;
  border: 1px solid red;
  padding: 5px;
  line-height: 23px;  /*Change the value according to your choice*/
}

Upvotes: 0

Related Questions