CSS issue with span

Question

I am trying to recreate a logo with plain text and CSS no images, the issue I have I can't seem to get padding to 0 around the text so that top and bottom text are only 2-5px apart.

Also is it possible to have them one on top of the other but not the have BIG TITLE CSS to

display:block

instead only to wrap around the text.

jSFiddle: http://jsfiddle.net/theStudent/ag60a6hs/

CSS:

/* FONT IMPORT */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);

.logo_large_txt{
  color: #2faed9;
  margin:0 0 0 0;
  padding: 0 0 0 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 36px;
  background-color: #000;
  white-space: nowrap;
  display: block;
}

.logo_small_txt{
  color: #c2c2c2;
  padding: 0;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  background-color: #000;
  white-space: nowrap;
}

HTML:

<div>
    <span class="logo_large_txt">BIG TITLE</span>
    <span class="logo_small_txt">SMALL CAPS</span>
</div>

Thanks

Answer 1

Yes this is line-height issue. You could set line-height to 1 or less on div and see the result.

For second part You should add <br /> tag between <span> tags.

fiddle or preview:

/* FONT IMPORT */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);

.logo_large_txt{
  color: #2faed9;
  margin:0 0 0 0;
  padding: 0 0 0 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 36px;
  white-space: nowrap;
}

.logo_small_txt{
  color: #c2c2c2;
  padding: 0;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
div.logo {
    line-height: 0.8;
    display: inline-block;
    background-color: #000;
}

<div class="logo">
    <span class="logo_large_txt">BIG TITLE</span><br />
    <span class="logo_small_txt">SMALL CAPS</span>
</div>

Answer 2

Perhaps adding line-height might help, for example line-height:50% for logo_large_txt.

Answer 3

This isn't a padding issue, it's a line-height issue. Set line-height: 1em; on the relevant elements (those with text in them) and see how the height of the element now equals the size of the text.