CODEWITHSUNDEEP
css
Alex
Alex

Reputation: 1

Adding padding to <li> in CSS is making the content not move with consistent line-height

My predicament is this. I have a list, a simple cart, login, user registration list. I want to move the list up by adding padding. But I cannot with out the list adding line height. What is the way around this? See examples below. This list is in the header.

Before: enter image description here

.content{
  border: 2px solid #000;
}

li {
	list-style-type: none;
	font-size: 10px;
	direction: right;
	text-align: right; 
	padding-bottom: 20px;
	line-height: 1;
	display: block;
}
<div class="content">
  <ul>
    <li>Cart</li>
    <li>Login</li>
    <li>Customer Registration</li>
  </ul>
</div>

After: enter image description here

Upvotes: 0

Views: 74

Answers (3)

Ehsan
Ehsan

Reputation: 12959

Try This:

ul {
    margin-top: 0;
}


ul {
  margin-top: 0;
}

li {
  list-style-type: none;
  font-size: 10px;
  direction: right;
  text-align: right; 
  padding-bottom: 20px;
  line-height: 1;
  display: block;
}
<ul>
  <li><a href="#">Cart</a></li>
  <li><a href="#">Login</a></li>
  <li><a href="#">Customer Registration</a></li>
</ul

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

give margin-top in minus so it will move upside

Upvotes: 0

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

You need to add the padding to the ul and not the li .

Upvotes: 3

Related Questions