how to set space between items inside a div-CodePudding

I have three elements in a div, an image an h4, and a link I want the image and h4 close to each other and some space between the link and h4 I tried this but it gives me the same space among all items

.location {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 0;
  }

CodePudding user response：

You can use flex with column-gap property, justify-content: space-between will provide even space between elements.

.location {
  display: flex;
  column-gap: 20px;
  justify-content: space-between;
}

You can use margin

.location{
 margin: 20px;
}

CodePudding user response：

.outer .same{display:inline-block}
.outer .same:nth-child(2){margin-right: 50px;}

<div >
  <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpPVyc4LETd6GWTNZWJCuiBWoEI3w5yHZeoA&usqp=CAU">
  <h4 >heading</h4>
  <a  href="#">link</a>
</div>

CodePudding user response：

Try to use margin between the objects you need that belong to your class .(your class) (html object) {...} For example:

    .location img {
        margin: 10px;
    }

CodePudding user response：

You can wrap the image and h4 in one div and keep the link on its own so there are only 2 elements in the .location flex div then set the justify content to either space around or space between you can also omit justify content and add a margin-left to the link specifying the space you need.

<div class='location'>
 <div>
  <img />
  <h4></h4>
 </div>
<a href=#></a>