This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 7 years ago.
Below is the given html code,
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
First case - Below is the css code applied, without setting margin,
.row {
background: red;
}
.column {
#margin: 10px;
background: green;
}
.blue {
background: blue;
}
and the output is:
Second case - Below is the css code, after setting margin,
.row {
background: red;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
with the output,
Third case - Below is the css code, with overflow set as hidden
.row {
background: red;
overflow: hidden;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
with the output,
1)
In above second case, Why does the container having 2 div elements does not expand on top margin?
2)
In above third case, Why does the container having 2 div elements expand on top margin?
By placing an overflow:hidden on the containing element you are changing it's Block Formatting Context. Only a few styles do this.
I usually use this method to self clear modules.
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I have the following HTML/CSS code:
<style>
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
</style>
<div class="container"></div>
<div class="timeline-container">
</div>
...which produces the following image:
Image of green box and blue box touching.
As you can see, the boxes are touching, with no vertical space between them.
I want to add some text to the second box, and I do so with an h4element. See code below:
<style>
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
</style>
<div class="container"></div>
<div class="timeline-container">
<h4>Test words </h4>
</div>
Which produces this image: green and blue boxes are no longer touching
Vertical space has appeared between the two boxes, and it seems to occur when I add the h4 element. I do not want this vertical gap between the boxes.
I want to understand:
Why this vertical space suddenly appears (I assume I'm lacking a piece of fundamental knowledge).
How to create 2 such boxes, with an h4 element in the second, and have no such space.
Thanks in advance for any help folks can provide.
Remove margin for h4 like
.timeline-container h4{
margin:0;
}
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
.timeline-container h4{
margin:0;
}
<div class="container"></div>
<div class="timeline-container">
<h4>Test words </h4>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm a novice and I just can't crack this one. I have three divs within a container div. They just won't line up neatly to make 100% - gaps appear between them, even though I've reset margin and padding to 0. As a result, the divs sometimes overflow.
I've stripped back the code to illustrate my problem simply.
body {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
.outsideDiv {
width: 100%;
color: white;
background-color: black;
}
.insideDiv {
display: inline-block;
width: 33%;
}
#div1 {
background-color: red;
}
#div2 {
background-color: green;
}
#div3 {
background-color: blue;
}
<body>
<div class="outsideDiv">
<div class="insideDiv" id="div1">width = 33%</div>
<div class="insideDiv" id="div2">width = 33%</div>
<div class="insideDiv" id="div3">width = 33%</div>
</div>
</body>
Live version.
I'm missing something obvious, right? Why are there thin gaps between the divs?
try changing you css like below
.insideDiv { display: inline-block; width: 33.33%; float:left;}
This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
If static positioned elements are not affected by the top, bottom, left, and right properties, why does the box move along with the container when I change the margin-top value of the box element?
I have kept my code at: https://jsfiddle.net/b9rtwkq7/5/
HTML:
<div class="container">
<div class="box">
</div>
</div>
CSS:
.container
{
width:500px;
height: 500px;
background-color: grey;
margin-top: 00px;
}
.box
{
width:100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
The margins are collapsed in the jsfiddle you posted: https://www.w3.org/TR/CSS2/box.html#collapsing-margins
Add overflow: auto/hidden to .container or use the following css which I've added in a class called .no-collapse myself:
.no-collapse:before {
content: "";
display: table;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I know many techniques for positioning divs side-by-side. However I've never understood why taking two border-box divs with width: 50% doesn't produce side-by-side divs. From what I understand of css, with margin, padding, and border out of the equation this should absolutely work.
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}
<div class="half left"></div>
<div class="half right"></div>
What am I missing?
Edit:
As many people are pointing out, display: block will not give me side-by-side behavior. This was a mis-type. I meant to make everything inline-block
First you need to understand that elements in HTML based on display property are of 2 types -
Block (eg: div, p, h1 - h6..etc)
inline (eg: span..etc)
Block level elements appear one below another, or as you may call it being stacked below each other,
whereas,
inline elements are created on the same line unless they are specifically styled as display: block OR if they encounter a <br /> tag.
SOLUTION:
You can use the property display:inline-block
Problem: It will add white spaces and put the second div on the next line even with width: 50%;. Now, there are several ways to remove whitespaces, you can try any one of them.
Use float: lefton both the div's
body {
padding: 0;
margin: 0;
}
div {
height: 300px;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
float: left;
}
.half-new {
display: inline-block;
width: 50%
}
<h1>Using Float</h1>
<div class="half left"></div>
<div class="half right"></div>
<hr />
<h1>Using inline-block</h1>
<div class="half-new left"></div><!--
--><div class="half-new right"></div>
Two reasons:
Div elements are display: block by default
You have space between the elements and space takes up … um space.
Change the display property and remove the space.
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
margin: 0;
display: inline-block;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}
<div class="half left"></div><div class="half right"></div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 9 years ago.
This question seems to have been answered a million times, and it seems to work a million times too. Not for me though. I would like to push together all the divs in
.mainprogress {
height: 60px;
border: 2px solid black;
}
.mainprogress div {
padding: 0;
margin: 0;
display: inline-block;
}
.detailprogress div {
height: 100%;
}
.detailprogress .done {
background-color: lightgreen;
}
.detailprogress .donelate {
background-color: lightpink;
}
.detailprogress .late {
background-color: red;
}
.detailprogress .todo {
background-color: green
}
<body>
<div class="mainprogress">
<div class="detailprogress" style="height:100%;width:18%">
<div class="done" style="width:58%"></div>
<div class="late" style="width:41%"></div>
</div>
<div class="detailprogress" style="height:35%;width:81%">
<div class="done" style="width:73%"></div>
<div class="todo" style="width:26%"></div>
</div>
</div>
</body>
Fiddle here
when fiddling enough with negative margins, it seems to start working at some point, but it feels terribly hackish. How do I get the elements to align to each other?
Background:
Inline-block inserts a natural space between items. In fact, it's essentially the width of a space if you were to hit the spacebar in your content, or even typing (an html markup space). This space will be smaller or larger dependent on your font size.
There are several fixes to this problem, and I personally as well as many others consider this problem to be a sort of "bug" that needs fixing. That said, all of the fixes for this are very "hackish" so to speak. The solution you choose is up to your personal preference.
Suggested Solution per your particular situation and code:
Simply switch over to using floats instead. Instead of setting display: inline-block; do this:
http://jsfiddle.net/uhBW2/9/
.mainprogress div{
padding:0;
margin:0;
float: left;
}
Other solutions:
(Note that in the JDFiddle solution using margin-left that the first div also moved left when it should not have done so. To counteract this problem you will need to implement a class on that first div and make that -4 value 0 for that div alone. Another solution, and my preferred solution, would be to use the :first-child structural pseudo-class to select that first div. It is more dynamic, and doesn't require HTML to be modified.
Fix the margin space by adding margin-left: -4px; -- http://jsfiddle.net/uhBW2/10/
Fix the space by shrinking the space using font-size: 0px; - http://jsfiddle.net/uhBW2/11/
Fix the space by deleting the line breaks between your div's (NOT RECOMMENDED - HARD TO READ) -- http://jsfiddle.net/uhBW2/12/
Fix the space by using word-space: -.25em; (See PavloMykhalov's comments below) -- http://jsfiddle.net/uhBW2/13/
***Note to other developers: If there are other solutions to this please post below and I will add it above. I feel like I'm missing a 5th way of fixing this...
The space is created because you've set the divs to "display: inline-block".
Read here how to fix:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Try using floats instead of inline-block, wider support and it actually works:
http://jsfiddle.net/uhBW2/7/
.mainprogress {
height: 60px;
border: 2px solid black;
overflow: hidden;
}
.mainprogress div {
padding: 0;
margin: 0;
float: left;
}
.detailprogress div {
height: 100%;
}
.detailprogress .done {
background-color: lightgreen;
}
.detailprogress .donelate {
background-color: lightpink;
}
.detailprogress .late {
background-color: red;
}
.detailprogress .todo {
background-color: green
}
<body>
<div class="mainprogress">
<div class="detailprogress" style="height:100%;width:18%">
<div class="done" style="width:58%"></div>
<div class="late" style="width:41%"></div>
</div>
<div class="detailprogress" style="height:35%;width:81%">
<div class="done" style="width:73%"></div>
<div class="todo" style="width:26%"></div>
</div>
</div>
</body>
You need to Add float:left to all the Elements that you need to push together like below:
.mainprogress {
height:60px;
border:2px solid black;
}
.mainprogress div{
padding:0;
margin:0;
display:inline-block;
float:left;
}
.detailprogress div {
height:100%;
float:left;
}
.detailprogress .done {
background-color:lightgreen;
float:left;
}
.detailprogress .donelate {
background-color:lightpink;
float:left;
}
.detailprogress .late {
background-color:red;
float:left;
}
.detailprogress .todo {
background-color:green
float:left;
}