Why do two inline-block elements show misalignment? How to solve this problem?

Inline-block element misalignment problem: Causes and solutions

In web page layout, you can sometimes encounter headaches of misalignment problems when using inline-block elements. This article will explore its reasons in depth and provide effective solutions.

Problem phenomenon

When multiple inline-block elements are arranged, especially if one of the elements has overflow: hidden attribute, there may be misalignment in the vertical direction. This is particularly evident in some browsers or in specific CSS styles.

root cause

The root of the problem lies in the baseline alignment of the inline-block element. overflow: hidden attribute will affect the baseline position of the element, causing deviations when the subsequent inline-block elements are aligned with their baseline, resulting in misalignment.

Solution: Cleverly use vertical-align

The most effective solution is to use vertical-align attribute. By setting vertical-align: middle; (or other suitable vertical alignment), all inline-block elements can be forced to align with the same baseline to eliminate misalignment.

The following code example demonstrates how to solve the problem:

 .list {
    display: inline-block;
    width: 80px;
    height: 80px;
    overflow: hidden;
    vertical-align: middle; /*key code*/
}

.add {
    display: inline-block;
    width: 76px;
    height: 76px;
    color: #ccc;
    border: 2px dashed;
    transition: color .25s;
    position: relative;
    vertical-align: middle; /*key code*/
}

By setting vertical-align: middle; for both .list and .add classes, they are aligned with the same vertical baseline, thus avoiding misalignment due to overflow: hidden . This is a simple and effective solution that works for most cases.

The above is the detailed content of Why do two inline-block elements show misalignment? How to solve this problem?. For more information, please follow other related articles on the PHP Chinese website!