This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
I'm trying to figure out why on earth the two sibling DIVs (date-tile & date-details) don't align vertically. Both have a margin-top of 6.5px, but the second div's margin seems to start from outside the parent div. See CSS in accompanying JSFiddle.
HTML:
<div class="uthlutanir">
<div class="event-date">
<div class="date-tile">
<div class="date-tile-month">
des
</div>
<div class="date-tile-day">
20
</div>
<div class="date-tile-weekday">
Fös
</div>
</div>
<div class="date-details">
<strong>15:00</strong> Lorem ipsum dolor sit amet.
</div>
</div>
</div>
https://jsfiddle.net/1k0sr9m8/
That's because you have the float:
.date-tile {
float: left;
float on MDN:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page
So that's why they are side by side.
See the sample in https://jsfiddle.net/m52abnso/2/
Also you have the margin-left on .date-details.
Removing it will get you the result: https://jsfiddle.net/m52abnso/3/
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 7 months ago.
<div style="background-color: #666">
<div style="margin: 20px">Some Content - no border</div>
</div>
However, if I add a border, background color is applied to the whole content including child element's margin:
<div style="background-color: #666; border: 1px solid">
<div style="margin: 20px">Some Content - has border</div>
</div>
What's the reason for this behavior? What's the specification explains this?
Since the parent Div is Empty, and the Child should have a distance to the border of the parent element, no background is shown in the margin. If you use Padding or a Border, you extend the area of the Child element to that border.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why is adding or removing a border changing the way margins work?
(1 answer)
Closed 2 years ago.
I was playing with css:
<body >
<div style="background-color:lightblue;">
<div style= "margin-bottom : 40px;">This is some text in a div element</div>
</div>
<div style="background-color:red;"> hdjj</div>
</body>
This code make the div tag to be away from second div and not from child div Why is it so?
It's due to margin collapsing. Margin collapsing simply means that if any element comes after another or inside another being first or the last element inside then the margin (top or bottom) touching with other element or parent will just collapse inside the other one's or parent's margin and simply the bigger margin will win. In this case, the child has a bottom margin collapsed with margin of parent and it all results in a case that the child doesn't have a margin but parent, but as soon as you apply border, the margin of child gets prohibited from collapsing with parent since the border comes in-between.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.
I need the inside div to have a margin-top relative to the outside div and not the whole block.
I created an example in codepen. I have one div, two div and three div.
Notice that I put the margin-top in div three, but all divs receive the effect.
Does anyone know the reason?
<div class="um">
<div class="dois">
<div class="tres" style="margin-top: 50px;">
conteudo
</div>
</div>
</div>
example codepen
use padding-top instead of margin-top.
<div class="um">
<div class="dois">
<div class="tres" style="padding-top: 50px;">
conteudo
</div>
</div>
</div>
default value tag div is display:block, add css on um class display:flex
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I'm Coding a sign in/sign up website, the css is very basic at this time along with basic js (I plan on polishing css). But I want to get the basic css done before working on html, one element of my website is an h3 element that I want to have a margin that pushes from the bottom of one of the selection divs but the margin is pushing from the top of the body rather than the containing div.
<div id="container">
<div id="leftFloat" class="50%">sign in</div>
<div id="rightFloat" class="50%">sign up</div>
<div id="rightFloat" class="50%">
<h2 id="selection" class="margin: 50px;">Pushes the container down rather than pushing itself down</h2>
</div>
</div>
This is what i want When Using The Margin
This is what i get when using the margin
Use clear:both for h2 as shown below:
h2{
clear: both;
}
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Why are these two inline-blocks not aligned? [duplicate]
(2 answers)
Vertically aligning relative inline block with non-relative inline blocks [duplicate]
(1 answer)
Display inline block text inside issue
(3 answers)
Closed 5 years ago.
My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.
HTML, CSS:
.container > div {
display: inline-block;
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
The problem is that the smallest line is aligned to the last line of the biggest div, as follows:
When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Found the solution, although i don't think it's the best way to do this:
.container > div {
vertical-align: top;
}
:)
You could add css property vertical-align: top, that way all content will start at the top of the div.
.container > div {
display: inline-block;
vertical-align:top
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>