CODEWITHSUNDEEP
css
Javier Benito Santoni
Javier Benito Santoni

Reputation: 45

Spacing between borders in a list

i need the borders of my list to appear like this on the screen, Im not able to put the white spacing between the border-bottom and the border-right.

This is my code: https://jsfiddle.net/w1n72hkx/3/

HTML:

<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>

CSS:

.barraDatosSociales {
  border: solid;
  border-top: none;
  border-right: none;
  margin-right: 3%;
  border-color: DarkTurquoise;
}
.barraDatosSociales li {
  display: inline;
  padding-right: 5px;
  border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
  border-right: solid;
  border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
  padding-left: 5px;
}

Here i attach an image of how it should look like: Final result

Upvotes: 1

Views: 259

Answers (3)

dmuensterer
dmuensterer

Reputation: 1885

Just apply a bottom and top margin to your li elements and set their display to inline-block in order to make the margin matter.

.barraDatosSociales {
  border: solid;
  border-top: none;
  border-right: none;
  margin-right: 3%;
  padding: 0 5px;
  border-color: DarkTurquoise;
}

.barraDatosSociales li {
  padding-right: 5px;
  
  /*Here' what changed*/
  display: inline-block;
  margin: 5px 0;

  border-collapse: separate;
}

.barraDatosSociales li:not(:last-child) {
  border-right: solid;
  border-color: DarkTurquoise;
}

.barraDatosSociales li:not(:first-child) {
  padding-left: 5px;
}
<div>
    <ul class="barraDatosSociales">
        <li>Valoración 4,6 (267 votos)</li>
        <li>108 comentarios</li>
        <li>716 veces compartido</li>
    </ul>
</div>

Upvotes: 3

Anurag Aron Tigga
Anurag Aron Tigga

Reputation: 339

You need a little modification in the css for the list-items.

Inline elements do not accept top/bottom padding and margins. So try using display: inline-block

.barraDatosSociales li {
  display: inline-block;
  padding: 5px 15px;
}

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

There are many ways to separate the internal borders:
you could move up list-items with a negative top value, e.g. 

.barraDatosSociales li {
  display: inline;
  padding-right: 5px;
  position: relative;
  top: -2px;
}

or you could add a padding-bottom to the outer container

.barraDatosSociales {
  border: solid;
  border-top: none;
  border-right: none;
  margin-right: 3%;
  padding-bottom: 2px;
  border-color: DarkTurquoise;
}

Upvotes: 2

Related Questions