CODEWITHSUNDEEP
htmlcss
natlotzy
natlotzy

Reputation: 97

Eliminate the extra space caused by letter width and the space between two divs

So here's what I'm dealing with: JSFiddle

1) Notice the tiny space to the left of the inner divs? I know it's caused by the font's letter width. All letter widths are the same by default. Is there a way I can get rid of the space before the first word?

I want the inner divs to line up perfectly, with the same exact margin space to the left.

2) Also, I know there has to be a way to get rid of the space between the two inner divs. I've tried setting margin-bottom: 0; to the first inner div, among other things, but nothing I've tried works.

HTML:

<div class="banner-text">
   <div class="banner-title">My full name here.</div>
   <div class="banner-subtitle">Three random words.</div>
</div>

CSS:

.banner-text {
    font-family: helvetica;
    font-weight: bold;
    border: 1px solid black;
}

.banner-title {
    font-size: 65px;
}

.banner-subtitle {
    font-size: 25px;    
}

Any help would be greatly appreciated, please!!

Upvotes: 0

Views: 47

Answers (1)

TheEwook
TheEwook

Reputation: 11117

  1. you can use margin-left
  2. you can use margin-top or margin-bottom

All combined:

.banner-text {
    font-family: helvetica;
    font-weight: bold;
    border: 1px solid black;
}

.banner-title {
    font-size: 65px;
    margin-left: -4px;
}

.banner-subtitle {
    margin-top: -10px;
    font-size: 25px;    
}

Upvotes: 1

Related Questions