CODEWITHSUNDEEP
htmlcss
Eric Brown
Eric Brown

Reputation: 1462

css padding causing borders to overlap

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.

enter image description here

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

enter image description here

Upvotes: 1

Views: 2887

Answers (4)

Abhishek Agarwalla
Abhishek Agarwalla

Reputation: 322

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.

Upvotes: -1

Govind Rai
Govind Rai

Reputation: 15800

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>

Upvotes: 0

derp
derp

Reputation: 2308

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;
}

Upvotes: 0

Banzay
Banzay

Reputation: 9470

It seems this css works:

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

Upvotes: 2

Related Questions