'Nested inline-block elment div

i try a grid with display:inline-block with divs. When I positioning the divs next to next all works fine. When I try to set elements inside the div then the parent div move down: error

The code:

<div style="white-space: nowrap;">
  <div *ngFor="let xUnit of xUnits; let i=index"
        style="width: 106px;
              max-width: 106px;
              display:inline-block;
              position: relative;
              height: 50px;
              max-height: 50px;
              padding-right: 5px;
              border: 1px solid #e5e7eb">
      <ng-container *ngFor="let item of getItems(resources[0], xUnit)">
        <div style="height: 25px;
                  position: relative;
                  border-left: 2px solid #FA607E;
                  background: white;
                  margin-left: 5px;
                  display: block;
                  margin-right: 5px;
                  color: #FA607E;
                  font-family: 'Source Sans Pro', sans-serif !important;
                  font-weight: 300;"
            [style.width]="getWidth(item)">
          <span style="padding-left: 5px;">
            Test
          </span>
        </div>
      </ng-container>
    </div>
</div>
htmlcssangular


Solution 1:[1]

That's one of the biggest so called 'bugs' in inline-block (alongside with crazy 2px extra space that it will add to elements!)

It happens because browser now sees your divisions as text! And is trying to align them based on their baseline

In most cases setting

vertical-align: top; Solves the problem

however I Recommend you to use flexbox because it has complete and good options for vertical alignment of elements

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mahdiar Mransouri

Related Questions