making space between two hyperlinks in div-CodePudding

I have two hyperlinks in div tag, I want to make a space between these two hyperlink

how should I do that?

.btn-filter {
  background-color: #ffffff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  height: 40px !important;
  width: 110px !important;
  border: 1px solid #ccc;
  vertical-align: middle;
  display: table-cell;
  margin-left: 10px !important;
}

.btn-filter>a {
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <a asp-controller="" asp-action="" >0-2</a>
  </div>
  <div >
    <a asp-controller="" asp-action="" >3-5 </a>
  </div>
</div>

CodePudding user response：

This is a way of doing it. I removed w-50 for instance, and the table-cell part. Without knowing your specific case, It's hard for me to show you exactly what you want other than just the addition of margin within the parent div, but hopefully you'll understand how it works and how some bootstrap classes are not always to be used (50% width on two items makes up to 100%, the space inbetween that can be utilized is thereby 0%.) See example below.

.btn-filter {
  background-color: #ffffff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  border: 1px solid #ccc;
  vertical-align: middle;
  width:100px;
  float:left;
  margin-right:50px

}

.btn-filter>a {
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div>
  <div >
    <a asp-controller="" asp-action="" >0-2</a>
  </div>

  <div >
    <a asp-controller="" asp-action="" >3-5 </a>
  </div>
</div>

CodePudding user response：

I like to use a column based approach where you add left/right margin to your children and then use negative spacing on your parent to keep the left alignment:

.btn-filter-wrap {
  padding-left: 10px;
  padding-right: 10px;
}

.btn-filter-inner {
  margin-left: -10px;
  margin-right: -10px;
}

.btn-filter {
  margin-left: 10px;
  margin-right: 10px;
}

You would then add this .btn-filter-wrap class to your .d-inline element and then REMOVE this .d-inline class. The inline display property is intended more for text and images. If you want to change the spacing, just make sure your updates are consistent between the parent and child margin properties.

EDIT:

I am now noticing that you are also attempting to use "display: table-cell" on your child items. Remove that and stick to flex. It would be best to update everything to use <table> elements if you want to display a table.

.btn-filter-wrap {
/* Potential side gutter spacing */
/*
  padding-left: 10px;
  padding-right: 10px;
*/

  overflow: hidden;
}

.btn-filter-inner {
  margin-left: -10px;
  margin-right: -10px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-filter {
  background-color: #ffffff;
  font-size: 14px;
  outline: none;
  border: 1px solid #ccc;
  margin-left: 10px;
  margin-right: 10px;
  
  height: 40px;
  width: 110px;
}

.btn-filter>a {
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <div >
      <a asp-controller="" asp-action="" >0-2</a>
    </div>
    <div >
      <a asp-controller="" asp-action="" >3-5 </a>
    </div>
  </div>
</div>