Why does an inline block drop out of the "parent"?

S

Satir012015-01-31 22:39:29

css

Satir01, 2015-01-31 22:39:29

It is a shame to ask about the "bearded button accordion", but "he has already overlooked all his eyes."
I don’t see what the error is, but when the browser window is reduced , the last inline block falls out of the parent. I added clearfix to the parent, but it still falls out. What's my mistake?
By the way, I don't understand why when the sum of the widths of the "children" is 100% and box-sizing: border-box, they do not fit into the "parent".
See codepen.io

<head>
    <link rel="stylesheet" type="text/css" href="/css/css.css">
</head>

<div class="header">
    <div class="wrap">
        <a href="" class="header--logo"></a>
        <ul class="header--menu">
            <li class="menu__item"><a href="/news/" class="menu__item--link">Новости</a></li>
            <li class="menu__item"><a href="/news/" class="menu__item--link">Новости</a></li>
            <li class="menu__item"><a href="/news/" class="menu__item--link">Новости</a></li>
        </ul>
        <div class="header--connection">
            <div class="header--link">
                <a href="tel:+22222222" class="header--link__contact">
                    +7 (222) 222-22-22
                </a>
                <a href="mailto:[email protected]" class="header--link__contact--email">
                    [email protected]
                </a>

            </div>
            <div class="header--link">
                <a href="/order/" class="btn">Заказать услугу</a>
                <a href="/vopros/" class="btn">Поиск по сайту</a>
            </div>
        </div>
    </div>
</div>

body {
    font-size: 100%;
    width: 100%;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}
.clearfix:after {
    content:'';
    display:table;
    clear:both;
}
.header {
    background-image:  url("/images/head.jpg");
    background-repeat: repeat-x;
    background-position: 60% 20%;
    height: 8em;
    border: 1px solid #ccc;
}
.wrap {
    width: 75%;
    margin:  0 auto;
}
.header--logo, 
.header--menu, 
.header--connection {
    display:  inline-block;
    box-sizing:  border-box;
    vertical-align: top;
    height: 100%;
    border: 1px solid #ccc;
}
.header--logo {
    width: 15%;
    background-image: url("/images/logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}
.header--menu {
    width: 40%;
    text-align: center;
    color: #287dcc;
}
.header--menu .menu__item {
    display: inline;
    margin: 0 auto;
}
.header--connection {
    width: 44%;

}
.header--link {
    height: 48%;
    display: inline-block;
    box-sizing: border-box;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

L

L0k1, 2015-01-31
@Satir01

I'm on my phone, I haven't looked at the code.
Inline block elements have additional padding - it is cured by setting the parent's font size and line spacing to 0 , and inline blocks are already returned to normal values. However, there are a lot of articles on this topic on the Internet.