Why Does The Margin From An Inline-block Element Affect A Sibling Inline-block Element
I can't figure out why the margin-top of the
Solution 1:
The inline-block
element behaves like an inline
element in that it will be subject to positioning attributes such as line-height
and vertical-align
. Once you increase the margin-top
of nav
past 500px
or so, the height of the line is larger than the height of the hgroup
. The default vertical-align
of baseline
pushes hgroup
down. In other words, the elements are positioned according to the inline flow.
Please note, in the snippet below, that when I set vertical-align
to top
than the hgroup
is placed at the top of the line.
heading {
position: relative;
display: inline-block;
border: 1px solid #333;
}
heading hgroup {
display: inline-block;
font-family: "Avenir";
font-size: 5em;
border: 1px solid yellow;
vertical-align: top;
}
nav {
position: relative;
display: inline-block;
margin: 550px00 -1.618em;
border: 1px solid red;
}
<heading><hgroup><h1>NERD</h1><h1>CO.</h1></hgroup><nav><ul><li><ahref="#">articles</a></li><li><ahref="#">podcast</a></li><li><ahref="#">social</a></li><li><ahref="#">about</a></li><li><ahref="#">contact</a></li></ul></nav></heading>
Post a Comment for "Why Does The Margin From An Inline-block Element Affect A Sibling Inline-block Element"