CODEWITHSUNDEEP
htmlcss
Higeath
Higeath

Reputation: 561

Setting border right and left closer together

I have border left and right and I would want them to be closer together so there would be a white space on the right and left. I tried with padding and with negative margins with no success.

.verticalLine {
  display: table-cell;
  height: 100%;
  width: 10%;
  border-left: 0.13em solid #ff0000;
  border-right: 0.13em solid #ff0000;
}
<div class="verticalLine">
</div>

enter image description here

I would want those 2 red lines to be closer together so there would be some white space on the right and left of them. (I don't want to change the width of this div)

EDIT: code updated

<div style="display: table-row;">
<p>Lfdskopfdksoppokfsdpokfs</p>
<div class="verticalLine">
</div>
</div>

p{
  word-break: break-all;
  display: table-cell;
    width: 45%;
}
.verticalLine:before{
  content: "";
  display: block;
  border-left: 0.13em solid #ff0000;
  border-right: 0.13em solid #ff0000;
  height: 100%;
  width: 60%;
  margin-left: 20%;
  box-sizing: border-box;
}
.verticalLine {
  display: table-cell;
  width: 10%;
}

Upvotes: 0

Views: 362

Answers (2)

Zoltan Toth
Zoltan Toth

Reputation: 47667

You can use CSS3 gradients instead of borders and style the background of your elements:

table{
  width: 100%;
}

td {
  background: linear-gradient(to right, 
    #fff 0%, 
    #fff 20%, #c00 20%, #c00 calc(20% + 2px), #fff calc(20% + 2px),
    #fff 80%, #c00 80%, #c00 calc(80% + 2px), #fff calc(80% + 2px), 
    #fff 100%);
  width: 50%; 
  height: 200px;
}

DEMO

Upvotes: 1

andreas
andreas

Reputation: 16936

You can just use the pseudo-element :before to create the vertical lines. Just make it smaller than it's parent, e.g. 60% and give it the corresponding margin for the gap to the side, in this case e.g. margin-left: 20%;. At last use box-sizing: border-box; to include the borders into the width and center the element properly.

I added a black border to make it easier to see:

.line {
  display: table-cell;
  height: 100px;
  width: 10%;
  border: 1px solid;
}
.line:before {
  content: "";
  display: block;
  border-left: 0.13em solid #ff0000;
  border-right: 0.13em solid #ff0000;
  height: 100%;
  width: 60%;
  margin-left: 20%;
  box-sizing: border-box;
}
<div class="line">
</div>

Upvotes: 1

Related Questions