CSS字體大小的破壞位置

Question

我有兩個相當不相關的元素， .menu和.content_selection_button 。 將它們聯系在一起的唯一事情是它們都在同一<ul>中的<li>元素內，除了它們沒有任何共享。 但是，出於某種原因，當我更改.content_selection_button的字體大小時，它會影響菜單的垂直位置。 我這里遇到了類似的問題。 為什么font-size破壞了我的位置，我該如何阻止它呢？

的jsfiddle

字體大小10

字體大小25

菜單CSS

.menu {
    display: inline-block;
    background-color:lightblue;
    margin: 1px;
    padding: 2px;
    box-sizing: border-box;
    border-radius:5px;
}

內容選擇按鈕CSS

.content_selection_button{
    font-size: 10px;
    box-sizing: border-box;
    border-radius:5px;
}

HTML

<ul class="t_inject_container">
    <li class="t_inject_row">
        <ul class="menu">
            <li id="LI_4">
                <button class="add_button t_intect_button">
                    +
                </button>
            </li>
            <li>
                <button class="minimize_button t_intect_button">
                    m
                </button>
            </li>
        </ul>
    </li>
    <li>
        <ul class="content_selection_container">
            <li>
                <form name="search_form" class="search_form">
                    <input type="text" name="search_input" class="search_bar" />
                    <input type="submit" value="🔍" class="search_button" name="search_button" />
                </form>
            </li>
            <li id="LI_14">
                <button class="content_selection_button">
                    My Timeline
                </button>
            </li>
            <li>
                <button class="content_selection_button">
                    relevent
                </button>
            </li>
            <li>
                <button class="content_selection_button">
                    mentions
                </button>
            </li>
        </ul>
    </li>
</ul>

Answer 1

你的主要元素是高度150px，LI高度在25％之內。 所以大約37.5px。 由於字體大小的增加，高度不會增加，但它會影響計算的線高，線高會增加推動按鈕中心軸下方的文本。

Answer 2

我暗示使用內嵌塊元素的底部垂直對齊可以解決對齊問題。 通過重新標記標記和CSS來簡化UI，可以避免這種情況。

[ELEMENT] {
  vertical-align: text-bottom;
}