CODEWITHSUNDEEP
htmlcssflexbox
Muhammad Ibrahim
Muhammad Ibrahim

Reputation: 53

how to set space between items inside a div

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

Upvotes: 1

Views: 6845

Answers (4)

lakshna S
lakshna S

Reputation: 273

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

Or

You can use margin

.location{
 margin: 20px;
}

Upvotes: 2

Web Ninja
Web Ninja

Reputation: 109

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>

Upvotes: 0

user17228175
user17228175

Reputation:

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

    .location img {
        margin: 10px;
    }

Upvotes: 0

Aman Sharma
Aman Sharma

Reputation: 964

.outer .same{display:inline-block}
.outer .same:nth-child(2){margin-right: 50px;}
<div class="outer">
  <img class="same" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpPVyc4LETd6GWTNZWJCuiBWoEI3w5yHZeoA&usqp=CAU">
  <h4 class="same">heading</h4>
  <a class="same" href="#">link</a>
</div>

Upvotes: 0

Related Questions