CODEWITHSUNDEEP
htmlcss
Rupesh
Rupesh

Reputation: 890

Why div is taking extra space for images?

I am trying to put the text just on the side of images but I don't know why my image div is taking extra spaces

.row {
  display: flex;
  flex-direction: row;
}

.round img {
  height: 15%;
  width: 15%;
  border-radius: 100%;
  margin: 10px;
}

.round{
  padding: 0 !important;
  text-align: left;
  justify-content: left;
  height: 10%;
}
<div class="row">
    <div class="round">
        <img mat-card-image  src="https://scontent-bom1-1.xx.fbcdn.net/v/t1.0-9/46463461_1157513267757941_7425556584253620224_n.jpg?_nc_cat=100&_nc_ht=scontent-bom1-1.xx&oh=3f957c2a41da24c5f0c505d61241fba5&oe=5C7550A3" alt="Card image cap">
    </div>
    <div>
      <p><a routerLink="#">Rupesh Yadav</a></p>
      <p><i>April,12,2018</i></p>
    </div>
</div>

Please help me on this.

Upvotes: 1

Views: 74

Answers (2)

Prameshwar Kumar
Prameshwar Kumar

Reputation: 117

You used display flex property as row but not sized flex column try below example hope that help you.

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative;
    z-index: 99999;
}

.round {
    padding: 0 !important;
    text-align: left;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    height: 100px;
    width: 100px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
}

.round img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin: 10px;

}

Upvotes: 0

Manish Patel
Manish Patel

Reputation: 3674

You need to define css in .round class not in img, and add width:100% in img css.

It's by default distribution within a flexbox to adjust the space.

.row {
  display: flex;
  flex-direction: row;
}

.round {
  height: 15%;
  width: 15%;  
  margin: 10px;
  padding: 0 !important;
  text-align: left;
  justify-content: left; 
}

.round img {
  width:100%;
  border-radius: 100%;
}
<div class="row">
    <div class="round">
      <img mat-card-image  src="https://scontent-bom1-1.xx.fbcdn.net/v/t1.0-9/46463461_1157513267757941_7425556584253620224_n.jpg?_nc_cat=100&_nc_ht=scontent-bom1-1.xx&oh=3f957c2a41da24c5f0c505d61241fba5&oe=5C7550A3" alt="Card image cap">
    </div>
    <div>
      <p><a routerLink="#">Rupesh Yadav</a></p>
      <p><i>April,12,2018</i></p>
    </div>
</div>

Or you can just add width in pixel in image it also work:

.row {
  display: flex;
  flex-direction: row;
}

.round img {
  width: 150px;  
  margin: 10px;
  border-radius: 100%;
}
<div class="row">
    <div class="round">
      <img mat-card-image  src="https://scontent-bom1-1.xx.fbcdn.net/v/t1.0-9/46463461_1157513267757941_7425556584253620224_n.jpg?_nc_cat=100&_nc_ht=scontent-bom1-1.xx&oh=3f957c2a41da24c5f0c505d61241fba5&oe=5C7550A3" alt="Card image cap">
    </div>
    <div>
      <p><a routerLink="#">Rupesh Yadav</a></p>
      <p><i>April,12,2018</i></p>
    </div>
</div>

Upvotes: 3

Related Questions