CODEWITHSUNDEEP
htmlcss
Matthew Francis
Matthew Francis

Reputation: 199

HTML/CSS -lineheight is affecting <br> tag?

So I want to do something like this:

Example

(I'm trying to replicate Amazon just for practice)

But when I tried a much shorter and better method, which is to alter the display to inline-block. Then in order to center it I would make the line-height similar to height.

But this casues one problem, the "category" word is pushed down too. So it looks like this:

Problem

This is the code, how should I fix it?

HTML:

<ul>
  <li> <a class="nav-text" href="file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Shop by <br/> category </a> 
  </li>
</ul>

CSS:

.nav-text {
    display: inline-block;
    height: 100px;
    padding: 0 20px;
    line-height: 100px;
    text-decoration:none;
    font-size: 23px;
    font-family: "Times New Roman", Times, serif;
    color: white;
    font-weight: 700;
    margin-right: 30px;
}

Upvotes: 2

Views: 104

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65806

You shouldn't need to change the display for the a at all. The a should have: 

 { vertical-align:middle; }

set for it and the height and all the rest should be set in a rule for the li, not the a. In fact, some of the other CSS properties can come out as well.

I've also updated the fiddle to move the p element you had nested inside the a element, so that it is now the parent of the a element (a bit more semantically correct).

https://jsfiddle.net/3Lsm4prg/4/

Upvotes: 2

Wowsk
Wowsk

Reputation: 3675

The issue is that line-height sets the line height of each line. Try using vertical-align:bottom instead on the nav-text class.

.nav-text {
  display: inline-block;
  padding: 0 20px;
  text-decoration:none;
  vertical-align:bottom;
  font-size: 23px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  color:white;
  margin-right: 30px;
}
li{
  list-style: none; 
  display:inline-block;
}
ul{
  padding:0; 
  background:rgb(35,47,62);
}
<ul>
            <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Shop by <br/> category </a> </li>
  <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Discussion Forums </a> </li>
  <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Help </a> </li>
</ul>

Upvotes: 0

Jasper
Jasper

Reputation: 833

Because you use the <br/> tag you basicly have 2 lines with both a line-height of 100px which causes the big spaces. If you wrap your text in a <p> tag with display: table; and vertical-align: middle; With this code you don't need to use the line-height you can resolve this problem. See my fiddle for the updated code:

https://jsfiddle.net/yjjmjya0/

.nav-text {
  display: inline-block;
  height: 100px;
  padding: 0 20px;
  vertical-align: middle;
  text-decoration:none;
  font-size: 23px;
  font-family: "Times New Roman", Times, serif;
  color: white;
  font-weight: 700;
  margin-right: 30px;
}

.nav-text p {
  display: table;
  vertical-align: middle;
  height: 100%;
}

<ul>
   <li> 
     <a class = "nav-text" href=file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> 
      <p>
        Shop by <br/> category 
      </p>
     </a> 
    </li> 
</ul>

Upvotes: 1

Related Questions