CSS - adding padding to list items not working properly

Question

I have an un-ordered list like so:

<ul>
    <li class="active">40' Singles</li>
        <li>46' Singles</li>
        <li>50' Singles</li>
        <li>Custom Lots</li>
</ul>

each list item is 50% in width, are floating left and have a background-color:

ul li {
 float: left; width: 50%; background-color: rgba(255, 255, 255, 0.7); 
}

Looks okay, so far, I have two list items per a line which is what I want, now I am trying to add padding to each list item so the background-colors are not touching..I have tried adding a padding of 20px and that did not work, added the padding, but now my list items are on their own line, I also tried with a margin of 20px, same result, what am I doing wrong here?

Voting to reopen because the duplicate answer only gets part way to the solution. — disinfor, Jan 24 '20 at 21:55

disinfor · Answer 1 · 2020-01-24T21:41:16.197

1

You need to add box-sizing: border-box to your li styles. The reason, is padding is not included in the width by default.

ul.calc li {
  float: left;
  width: calc( 50% - 20px);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;
}

ul.background-clip li {
  float: left;
  width: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  box-sizing: border-box;
  background-clip: content-box;
}

<ul class="calc">
  <li class="active">40' Singles</li>
  <li>46' Singles</li>
  <li>50' Singles</li>
  <li>Custom Lots</li>
</ul>

<ul class="background-clip">
  <li class="active">40' Singles</li>
  <li>46' Singles</li>
  <li>50' Singles</li>
  <li>Custom Lots</li>
</ul>

edited Jan 24 '20 at 21:41

answered Jan 24 '20 at 21:26

disinfor

10,865
2
33
44

I did that but the background-colours are still touching – user979331 Jan 24 '20 at 21:28
however they are no longer on their own line, which is good, but yea the background-colors are still touching...how would I get spacing? – user979331 Jan 24 '20 at 21:29
Updated answer. Use `calc()` on width and add margin. – disinfor Jan 24 '20 at 21:30
1

@user979331 or add `background-clip:content-box` and no need to add margin or change the width – Temani Afif Jan 24 '20 at 21:34
@TemaniAfif That works as well, but then the padding bg-color will disappear. I added it as another example. – disinfor Jan 24 '20 at 21:38
@user979331 can you mark this as the accepted answer since your question was reopened? Thanks! – disinfor Jan 25 '20 at 17:00

CSS - adding padding to list items not working properly

1 Answers1