CODEWITHSUNDEEP
htmlcssangularjs
Devesh Agrawal
Devesh Agrawal

Reputation: 9212

Why random margins between HTML Div tags

I am trying to fill the data in div tag using angularJS loop.

<div>
    <div class='box' ng-repeat="product in Products | filter:{'scid': SCId.toString()}:true | orderBy:'pname'">
        <br>
        <b>{{product.bname}}  </b>
        <br>{{ product.pname }}
        <br>
        <img src="http://localhost/{{ product.image_path }}" alt="" border=3 height=75 width=75></img>

    </div>
</div>

This is my CSS Class.

.box {
margin : 5px;
display : inline-block;
width: 150px;
height: 250px;
background-color: grey;
text-align:center;
}

But its not rendering properly. (some random margin top and bottom)

enter image description here

Can someone help what i am doing wrong??

Upvotes: 1

Views: 1693

Answers (3)

dippas
dippas

Reputation: 60553

this is because display:inline-block, is by default set to vertical-align:baseline, so you need to set vertical-align:top.

An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a width and height which will be respected.

Source

Plus display:inline-block causes gap between elements, which there are a few solutions to fix them:

  • Remove the spaces
  • Negative margin
  • Skip the closing tag
  • Set the font size to zero

Read more

so here is a snippet:

.box-wrapper {
  font-size: 0
}
.box {
  margin: 5px;
  display: inline-block;
  width: 150px;
  height: 250px;
  background-color: grey;
  text-align: center;
  vertical-align: top;
  font-size: 16px;
}
<div class="box-wrapper">
  <div class="box">this will be vertical aligned top</div>
  <div class="box">this will be vertical aligned top</div>
  <div class="box">this will be vertical aligned top</div>
</div>

Upvotes: 1

hobberwickey
hobberwickey

Reputation: 6414

add

vertical-align: top;

to your CSS

Upvotes: 3

w3debugger
w3debugger

Reputation: 2102

  1. This is due to vertical-align: middle always add vertical-align: top; with display: inline-block;

  2. Second problem is unknown margins, display: inline-block; elements get margin, add font-size: 0 to its parent. :)

ul {
  max-width: 500px;
  font-size: 0;
  margin: 0 auto;
}
ul > li {
  display: inline-block;
  width: 100px;
  height: 150px;
  background: black;
  margin: 5px;
  list-style: none;
  vertical-align: top;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Upvotes: 4

Related Questions