CODEWITHSUNDEEP
htmlcsspositionalignmentfont-size
EasilyBaffled
EasilyBaffled

Reputation: 3882

CSS font-size wrecking placement

I have two elements that are fairly unrelated, the .menu, and the .content_selection_button. The only thing that ties them together is that they are both inside <li> elements in the same <ul>, other than that they share nothing. Yet, for some reason when I change the font-size of a .content_selection_button it affects the vertical placement of the menu. I had a similar problem here. Why is font-size ruining my placement, and how can I stop it?

JSFIDDLE

Font Size 10

Font Size 10

Font Size 25

Font Size 25

Menu CSS

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

Content Selection Button 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>

Upvotes: 0

Views: 215

Answers (2)

JohanVdR
JohanVdR

Reputation: 2878

I hinted that playing with bottom vertical alignment of the inline-block elements could fix the alignment issues. This could be avoided by simplyfing the UI by reworking the mark-up and CSS.

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

Upvotes: 1

Suraj Naik
Suraj Naik

Reputation: 505

You've main parent element's with height 150px with LI inside 25% height. so that comes around 37.5px. The height wont increase due to the increase in font size, but it will affect the calculated line height, the line-height will increase pushing the text below a central axis of the button.

Upvotes: 1

Related Questions