css margin pushing body [duplicate] - html

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;
}

Related

Margin not implemented from parent element [duplicate]

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.

sibling divs top margins not starting from same point [duplicate]

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/

How to set margin-top proeprly in WordPress? [duplicate]

This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 5 years ago.
I am making the footer of my WP custom theme. I have footer div(inside which I place components). I also have a logo div(where my logo is). I need distance from 12px between the begening of the footer div till the logo div.
I am using this:
<div class="footer">
<div class="footerlogo">
<img id="pic" src="<?php bloginfo('template_url') ?>/img/footer_logo.png">
</div> .......
.footerlogo{ margin-top:30px;}
It doesnt show any differance. WHat is the proper way of doing that?
enter image description here
You could use padding on the footer div, for example:
.footer {
padding-top: 12px;
}
This would add space between both the .footer and .footerlogo div elements.
https://jsfiddle.net/ss7Lp2nd/

Borders in <div> [duplicate]

This question already has answers here:
White space at bottom of anchor tag
(5 answers)
Closed 9 years ago.
Problem image:
Well, how can you see, there's a border, that blue line below the black image, I need to remove it, but I can't, I don't know how to do it. I need some solutions.
<div align="center" style="background-color:#00F;">
<img src="images/topimage.png">
</div>
<div>
<img src="images/topimage bottomborder.png" style="width:100%;height:9px;">
</div>
Above's the code.
Images are by default inline elements, so there, again by default, is space between the bottom edge of an image and the bottom edge of its container.
img {
display: block
}
Alternatively, this should also work:
img {
vertical-align: top
}
Us an appropriate selector.

padding in one div affects other divs [duplicate]

This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 9 years ago.
I have three inline-block divs like this:
<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>
I added a padding to the second div to display it a little lower, but this makes others divs to go down as well. How to make only the second div to display lower?
Here is a JSFiddle: http://jsfiddle.net/mY6hP/
The same thing was asked here, but the accepted answer suggests using absolute positioning, which i would not like to do.
Change the alignment on the other divs so they allign themselves at the top (via vertical-align:top;):
<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>
Try float:left instead of inline-block display:
<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>