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;
}
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:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I want to make a registration form
How can I align this box like right under the head title?
h1 {
text-align: center;
}
.registrerBoks {
width: 300px;
height: 300px;
background-color: lightblue;
}
<h1>registrer</h1>
<div class="registrerBoks">
</div>
You can use margin:auto:
h1 {
text-align: center;
}
.registrerBoks {
width: 300px;
height: 300px;
margin: auto;
background-color: lightblue;
}
<h1>registrer</h1>
<div class="registrerBoks"></div>
Add margin: auto; to the registerBoks form.
h1 {
text-align: center;
}
.registrerBoks {
width: 300px;
height: 300px;
margin: auto;
background-color: lightblue;
}
<h1>registrer</h1>
<div class="registrerBoks">
</div>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
Run the snippet below, and you will see that these two balck boxes occupy more space than they need (vertically). Why is that so? I have tried settting margin / padding to 0, but it did not work.
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
use font-size: 0;
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
font-size: 0;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
My html has 2 sections, margin is zero but it still showing
.box1 {
width: 300px;
height: 450px;
background-color: green;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;
}
.box2 {
width: 150px;
height: 300px;
background-color: purple;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;
}
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
this is result
It is not the margin. It is the new lines converted to "spaces" when displaying it.It is because of the display:inline-block of the div . You can either remove the space or remove that with comments <!-- --> between the divs
.box1 { width: 300px;
height: 450px;
background-color: green;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px; }
.box2 { width: 150px;
height: 300px;
background-color: purple;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;}
<div class="box2"></div><!--
--><div class="box1"></div>
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.