This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I don't understand why adding a text do a div seems to be changing how the div is parsed by the browser? Looks like the margin-top is changed, though it isn't.
HTML
<div id="nav">
<div class="nav-left">left</div>
<div class="nav-logo"></div>
<div class="nav-right">right</div>
</div>
CSS
#nav {
width: 400px;
height: 30px;
background: #f5f5f5;
border: 1px solid grey;
text-align: center;
}
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
}
.nav-left {
background: red;
}
.nav-right {
background: blue;
}
.nav-right, .nav-left {
width: 50px;
}
.nav-logo {
background: yellow;
width: 30px;
margin-left: 10px;
margin-right: 10px;
}
Code is also here: http://jsfiddle.net/NcA8r/
As #JoshCrozier said, you need to add a vertical-align to your 3 divs.
This:
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
}
Should be:
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
vertical-align:top;
It happens because you used display: inline-block; in your inner divs.
inline-block elements are vertical-align:baseline; by default.
Check this out this great answer.
"The default value for vertical-align in CSS is baseline."
And this one too.
Related
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 11 months ago.
I have a React component which is divided into 3 parts to hold 3 different data values - date, title and amount.
The layout looks good and aligned, but when I add a value in the first section (red), it will adjust my CSS is a very strange way which I can not figure out why.
First image shows the component itself, second image shows the component with HTML content inside it.
Expense.js
<div className="expense">
<div className="date">
<h6>DEMO!</h6>
</div>
<div className="title">
</div>
<div className="amount">
</div>
Expense.css
.expense {
border: 1px darkslategrey solid;
height: 100px;
display: flow-root;
}
.date {
display: inline-block;
background-color: darkred;
width: 20%;
height: 100%;
}
.title {
display: inline-block;
background-color: darkorange;
width: 60%;
height: 100%;
}
.amount {
display: inline-block;
background-color: darkgreen;
width: 20%;
height: 100%;
}
Add vertical-align: top to the three (inline-block) components. The default value for this is baseline, which is what you see in your second image.
Actually you don't need to add it three times, but can do it like this:
.expense > div {
vertical-align: top;
}
Full code (converted to plain HTML/CSS):
.expense {
border: 1px darkslategrey solid;
height: 100px;
display: flow-root;
}
.expense>div {
vertical-align: top;
}
.date {
display: inline-block;
background-color: darkred;
width: 20%;
height: 100%;
}
.title {
display: inline-block;
background-color: darkorange;
width: 60%;
height: 100%;
}
.amount {
display: inline-block;
background-color: darkgreen;
width: 20%;
height: 100%;
}
<div class="expense">
<div class="date">
<h6>DEMO!</h6>
</div><div class="title">
</div><div class="amount">
</div>
</div>
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 3 years ago.
I have two divs side by side in inline-block style. When changing overflow on hover from hidden to visible using pure CSS, why do divs change position?
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
.overlaping:hover {
overflow: visible;
}
.wrapper {
height: 200px;
width: 100%;
background: lightblue;
}
<div class="wrapper">
<div class="overlaping">
Some longer text
</div>
<div class="overlaping">
Other div
</div>
</div>
I know inline-block is causing it, but is there some way to mitigate changing position and keeping the display inline-block at the same time?
By default inline-blocks have vertical-align: baseline, which is why it jumps around if another height changes. To fix this, add
.overlaping {
vertical-align: top;
}
Probably you should change the height instead of the overflow setting.
Also add the min-height and float to the boxes.
.overlaping{
width: 14.2%;
min-height: 50px;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background:yellow;
overflow:hidden;
float: left;
}
.overlaping:hover{
height: auto;
}
.wrapper{
height:200px;
width:100%;
background:lightblue;
}
<body>
<div class="wrapper">
<div class="overlaping">
Some longer text ddg dfg sdfg sdfg sdfgsdfgsdfgsdfg sdfgsdfgsd fgsd fgsd fgsdfgsdfgs dfg sert sertsertsertgs dfgsdfg dfgsdfg
</div>
<div class="overlaping">
Other div
</div>
</div>
</body>
Modify .overlapping style as shown below
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
float:left;
margin-right:5px;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
I have a simple inner/outer div problem where it's probably easier to explain through pictures. Here is my issue:
The comment "This is a witty comment." is not breaking down underneath the other 2 labels. Here is my HTML:
<div class="commentOuter">
<div class="commentAuthor">someauthor</div>
<div class="commentDate">17 minutes ago</div>
<div class="commentText"><span>This is a witty comment.</span></div>
</div>
And here's the CSS:
.commentOuter
{
border-radius: 4px;
width: 100%;
height: 20px;
float: left;
background-color: black;
margin-top: 10px;
padding: 5px;
}
.commentAuthor
{
float: left;
font-size: smaller;
color: #68a5d9;
display: block;
height: 15px;
}
.commentDate
{
float: left;
font-size: smaller;
margin-left: 5px;
color: #AAA;
display: block;
height: 15px;
}
.commentText
{
display: block;
width: 100%;
}
I don't understand that when I highlight the element in the dev tools, the div is not showing to be underneath the labels, as seen in this pic:
Any help is much appreciated.
Because you floated the previous 2 elements. If you need to move it below. Use a clear:
.commentText
{
clear:both;
display: block;
width: 100%;
}
You also have to remove the specified height for the .outerComment element.
Just because it's not floated, doesn't mean it won't be next to other elements.
See more here: https://css-tricks.com/all-about-floats/
This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 7 years ago.
I have this code:
<div class='block'>
<div class='container'></div>
</div>
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
width: 30px;
height: 30px;
background: red;
margin: 50px;
}
I can not understand why margin does not work inside the block?
JsFiddle: https://jsfiddle.net/39yy7a0q/
Try below css. I have added position to .container, and adjusted margin value as it should relevant to parents width. https://jsfiddle.net/39yy7a0q/4/
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
position:absolute;
width: 30px;
height: 30px;
background: red;
margin: 35px;
}
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00