Sorry, i am novice in CSS. I have the following html:
<div class="box-A" >Box A is here</div>
<div class="box-B" >Box B is here</div>
and i have tried to apply the following css to it:
.box-A{
background-color: red;
padding: 30px;
margin: auto;
border: 13px solid green;
margin-bottom: 40px;
}
.box-B{
background-color: blue;
padding: 40px;
margin-top: 140 px;
}
It works correctly for box-A meanwhile when i apply margin-top: 140 px; to box-B I expect to see a margin around 180px between 2 boxes.
But nothing happens. Can you please tell me why margin-top does not effect?
Do not use space between px and number.
.box-B{
background-color: blue;
padding: 40px;
margin-top: 140px;
}
regarding to w3 schools css margin-top property it can happen, that only the biggest of both values (top and bottom) is accepted.
Margin Collapse. Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
This does not happen on horizontal margins (left and right)! Only vertical margins (top and bottom)!
Related
As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
Use a padding in the green container instead of a margin on the orange element.
Use padding instead of margin:
.body .container {
...
padding-top: 30px;
}
Not sure if this will work in your case, but I just solved this with the following CSS properties
#element {
padding-top: 1px;
margin-top: -1px;
}
#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
You read this document:
Box model - Margin collapsing
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
Not sure how hackish this sounds, but how about adding a transparent border?
Why is the margin on the content div pushing down the intro div as well? I feel like I made a really silly mistake when nesting the divs, but I really have no idea.
body {
margin: 0px;
}
div.content {
text-align: center;
margin-top: 35px;
border-style: solid;
}
h1 {
display: inline-block;
margin: auto;
font-family: Lane;
color: white;
font-size: 80px;
}
div#intro {
background: blue;
height: 100%;
width: 100%;
}
<div id=intro>
<div class=content>
<h1>Text</h1>
</div>
</div>
This is occurring because the vertical margins are collapsing.
Box Model 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.
Take a look at the relevant spec to see the rules that apply for all the possible workarounds.
For instance, one rule is:
Margins of elements that establish new block formatting contexts (such as floats and elements with overflow other than visible) do not collapse with their in-flow children.
Therefore, in your case, you can simply change the overflow property on the #intro element to something other than the default value of visible. Values such as auto/hidden would work:
body {
margin: 0px;
}
div#intro {
background: blue;
height: 100%;
width: 100%;
overflow: auto;
}
div.content {
text-align: center;
margin-top: 35px;
border-style: solid;
}
h1 {
display: inline-block;
margin: auto;
font-family: Lane;
color: white;
font-size: 80px;
}
<div id=intro>
<div class=content>
<h1>Text</h1>
</div>
</div>
With the "Text" inside both divs, they might as well be one single div. Also, that "body" style means nothing if you don't use the <body> and </body> tags. More complete HTML might help us give you a solution.
I have a footer that has three rows. Row one is two divs floated left. Row two is a 'divider' line that is 100 width of the footer. Row three will be 3 more divs floated left.
The problem is on the first row. I have a margin-top:40px; for the middle line. The first floated element sits on top as it should but the second floated element ( which is going to be a text box and has padding inside ) sits on top fine WITHOUT padding, but when I put the 10px padding in, it sits 40px above as it should, but adds extra margin to the elements around it.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
**** PLEASE NOTE ***** The code snippet is not an accurate representation as css reset and clearfix is missing so not correct. Someone else edited this and put it there....
Unless you tell it to, the browser will make the element the width you specify, and then add on the padding etc
If you set the border-sizing property this will prevent it from happening;
box-sizing: border-box;
Try adding that to your CSS declaration
You can compensate for the shifting by of the padding by adding either margin-top:-10px; or position: relative; top: -10px; to .newsletter.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
margin-top: -10px; /* negative or padding value - readjusts position back up */
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
After reviewing what you said about my old, now competently irrelevant answer, i think i found what your issue is.
padding:10px;
adds padding to ALL 4 sides. it is functionally equivalent to
padding: 10px 10px 10px 10px;
the newsletter div is now significantly Taller than the other stuff in the same div, and the browser is forced to compensate by making the container div bigger. the container div gains 20 pixels in height when you do this, which would appear to add additional margin to the other elements.
to remove this, you would instead want to use either of these
padding: 0 10px;
padding: 0 10px 0 10px;
as per http://www.w3schools.com/cssref/pr_padding.asp
either will add padding to the LEFT and RIGHT sides equal to 10px, but the top and bottom will remain 0. the newsletter div will no longer be over-sized, making the container div bigger, which will make it appear there is margin for the others.
Edit (additional options):
however, if you want to keep the top and bottom padding, your have 3 main options.
1) add the padding to the other div inside the parent as well as newsletter. they will line up with newsletter, and have the extra space above and below. you would likely want to shrink the middle div's height to compensate for the increase.
2) to completely remove the newsletter from its parent div. set the width of newsletter and its parent div so that they add up to 100% including padding and borders, or use box-sizing:border box, and float both left so that they line up horizontally. now you can make newsletter as big as you want, and it will not affect the others.
3) you fix the height of the parent div,so that newsletter can be bigger than its parent div, however this tends to cause problems with layouts if your not careful, as it may overlap.
I have a border which I am wrapping around the page using <div>. The parent element is the actual page. I can't seem to figure out why the margin-bottom is not working.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin-top: 24px;
margin-bottom: -24px;
margin-left: 24px;
}
<div class="page_border"></div>
I think the fact you have the bottom margin set to a negative value might be the issue if what you want to do is put a margin between the div and the bottom of the page. If you remove the negative sign that should work. See below.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin: 24px 0 24px 24px;
}
<div class="page_border"></div>
Not sure on what you are asking completly.
Could you not put a height value onto the body tag, and then adjusting the height: value; from div, by doing so though the body will have a fixed height and you may need to set overflow: auto; on the div.
I have a menu bar the is centered on the screen. To the left I have a element as well as one to the right. These have background images that tie the menu bar to the rest of the graphical layout.
The problem is that there are white spaces between the tags. Here is the CSS:
#menu_items {
display: inline-block;
position: relative;
margin: 0;
padding: 6px;
top: -9px;
height: 15px;
background-color: #75784D;
}
#swoop_left {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_l.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
font-size: 0px;
border: solid red 1px;
}
#swoop_right {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_r.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
border: solid red 1px;
}
The images themselves are 140px x 21px (w x h).
I can't float them because the menu won't center. I can't use
font-size: 0px;
on the parent container because it won't display the menu items, and setting the menu-items to
font-size: 1em;
afterwards doesn't fix the issue.
Anyone have a solution that will work in all browsers and doesn't rely upon JS?
NOTE: The borders of the two elements are for layout purposes only and won't be in the final code.
How exactly are the items in the menu generated? In the div that contains the menu are you using an unordered list?
If you are then one possible solution would be to add the left and right images to the :first-child and :last-child elements of the list using css. You would no longer need the two extra div elements and so could just concentrate on the single menu container.
There are four ways which i know & which you can use to remove the whit space.
1) as you said give font-size:0; to your parent DIV & define the font-size:15px; to your child divs.
2)You have to write your mark up in a single line like this:
<div class="parent">
<div>1</div><div>2</div><div>3</div>
<div>
Instead of this
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3) Not that good solution but some time effective. Give margin-letf:-5px in your div. Like this:
div + div{margin-left:-5px}
4) At last you can use float instead of inline-block;
set background color to check your div width and height and you can use margin-left: with negative value to stand your div perfectly.