This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
On this code sample,
When I delete the padding on the element with an id of #a, the blue element moves up, and vice versa.
But when I inspect the margins and padding in the Chrome dev tools, it looks like they shouldn't affect each other at all!
Why is the padding of the red element affecting the VERTICAL positioning of the blue element?
I understand why it would affect the horizontal, but the vertical change confuses me!
I've looked into the CSS box model, but it hasn't helped.
* {
font-size: 20px;
}
#a {
background-color: red;
display: inline-block;
box-sizing: border-box;
height: 100px;
width: 150px;
padding: 30px;
}
#b {
background-color: blue;
display: inline-block;
}
<div id="a">
CONTENT
</div>
<div id='b'>
CONTENT
</div>
I expect that changing the padding of the red el wouldn't affect the positioning of the blue el at all!
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
why the layout is messed up?
why the p element is doing this?
why the first div is a little bit closer to the bottom of the page
#pricing div {
display: inline-block;
width: 30%;
height: 200px;
border: solid 2px black;
}
<section id="pricing">
<div id="plan-1m">
<!--try without p -->
<p>why this p messes up the layout?</p>
</div>
<div id="plan-3m">
</div>
<div id="plan-12m">
</div>
</section>
You should add vertical-align: top; to your div element.
The default value is vertical-align: baseline;, and for what I understand from the documentation, it tries to align the bottom of your p with the bottom of other divs (because they don't have any content)
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
.d1 {
height: 10px;
}
.dd {
display: inline-block;
overflow: hidden;
}
.dd1 {
display: inline-block;
}
<div class="d1">
<div class="dd"></div>
<div class="dd1"></div>
</div>
unset the overflow the dd and dd1 is in same line. but if set the two divs not has an equal height.
If you take a look at the spec, you may read:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So what we know as the "baseline" is actually different for inline elements that have an overflow that is something other than visible.
To have them to visually appear inline, I believe you'll need to explicitely style the vertical-align property:
.d1{
height:10px;
}
.dd{
display:inline-block;
vertical-align: bottom;
overflow:hidden;
}
.dd1{
display:inline-block;
vertical-align: bottom;
}
Try this
.d1 {
display: flex;
align-items: center;
}
.dd {
overflow: hidden;
}
This question already has answers here:
Vertical-align aligns everything else except self
(2 answers)
How does the vertical-align property work?
(2 answers)
inline-box with image vertical-align:middle with parent box
(1 answer)
Closed 3 years ago.
I have an inline-block element inside a div that I need vertically aligned in the middle. However, the attribute doesn't work as expected and is always a little pushed down. This fiddle demonstrates the problem https://jsfiddle.net/e4spxubf/
I have tried setting the height and line-height of both the child parent elements to the same 14px.
<div style="
height: 14px;
line-height: 14px;
background-color: red;
"><span icon="eye-open" style="
vertical-align: middle;
background-color: aquamarine;
height: 14px;
width:14px;
display: inline-block;
"></span></div>
I expect that the blue box will be perfectly vertically centered in the parent.
The div is aligning itself with the baseline of the span. When you set vertical-align: baseline, you'll find the span now aligns itself with the baseline, too.
This question already has answers here:
why do link background overlap parent's sibling
(4 answers)
Closed 8 years ago.
I have a problem with padding and container.
.box {
border: 1px solid black;
}
a {
background-color: green;
padding: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box">
<span class="link">
<span>Hello!</span>
</span>
</div>
When a content has a padding the container ignores the padding's height.
In the example is visible that the span "link" is not drawn in the edge of the container.
How can I fix the problem?
JSFiddle
Thanks!
Add
a {
display: block;
}
http://jsfiddle.net/rxjwcdyp/5/
since the a is an inline-element, you have to give it a display:block.
Maybe you watch some tutorials about how HTML-elements work!
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
Curious why the top and bottom margins of 10px are not applied to the inner div in the snippet below. If I set the inner display property to "inline-block" it applies the top/bottom margins as expected.
jsFiddle example
HTML:
<div class="outer">
<div class="inner">
My content...
</div>
</div>
CSS:
.outer {
background-color: lightgrey;
}
.inner {
background-color: green;
padding: 50px;
width: 600px;
margin:10px;
display: block; /* No top, bottom margins applied. Does apply them with "inline-block". Why? */
}
The .inner top margin is collapsing.
An easy fix is to make the outer display:inline-block You should put padding:10px on the outer and no margin on the inner.