CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfrontendline-height
ProgrAngel
ProgrAngel

Reputation: 1

Why is the li element height affected due to the line-height property?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="navbar-links">
  <li class="li-link"><a href="" class="nav-link">About</a></li>
  <li class="li-link"><a href="" class="nav-link">Careers</a></li>
  <li class="li-link"><a href="" class="nav-link">Events</a></li>
  <li class="li-link"><a href="" class="nav-link">Products</a></li>
  <li class="li-link"><a href="" class="nav-link">Support</a></li>
</ul>

I mean, line-height property is a very important and useful resource but why does it has to affect an element when it doesn't even has text? (For example: a nav that contains a ul with a couple of li-s inside and this ones anchor tag elements inside)

Probably not the best explanation of a doubt but I hope you understand my confusion.

Upvotes: -1

Views: 26

Answers (1)

Naeem Akhtar
Naeem Akhtar

Reputation: 1270

I think what you're trying to say is if there is not text in li then it should not apply the line-height property.

It is because bootstrap has class defined with line-height property. If you don't want line-height for li element then you can use another class name for that.

I hope this make some sense.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<ul class="navbar-links">
  <li class="li-link"><a href="" class="nav-link lh-1">About</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Careers</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Events</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Products</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Support</a></li>
</ul>

Upvotes: 1

Related Questions