css padding causing borders to overlap

Question

I have css that adds a border around a list items, but when I add the padding, the list items' borders start crossing over each other. Here is my current css for the Li:

.display_times{padding: 5px 10px 5px 10px !important; font-size: 24px; border:1px solid black; display:inline; }

Here's a picture of what it looks like.

Is there any way to keep the padding but push the borders back so that they are more like this, but with padding:

Answer 1

It seems this css works:

.display_times {
  padding: 5px 10px 5px 10px !important;
  font-size: 24px;
  border:1px solid black; 
  display: inline-block;
}

Answer 2

Not sure if this is what you are after but:

HTML

<ul>
  <li>10:00</li>
  <li>12:00</li>
  <li>13:00</li>
</ul>

CSS

ul{
  padding: 0;
  list-style: none;
  border:1px solid black;
}

li {
  border-bottom: 1px solid black;
}

li:last-child{
  border-bottom: 0;
}

Answer 3

Here's one way to do it.

 div { width: 50px; text-align: center; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; padding: 5px; } .last { border-bottom: 1px solid black; } 

 <div>11:00</div> <div>12:00</div> <div>13:00</div> <div class="last">14:00</div> 

Answer 4

Don't Ever use display:Inline , if you want to give the elements a specified padding or height, because these properties doesn't apply to inline .

You Can Only Set left or right width using Inline, better always use for such situation inline-block .