This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
Apply this code and you can see it. The margine-top of the internal box is applied to the outside. How can inBox not affect the box?
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
}
.inBox{
width: 200px;
height: 200px;
background-color: white;
margin-top: 100px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div class = "box">
<div class = "inBox">
</div>
</body>
</html>
So you actually can have margin-top on the child element. As mentioned by others, vertical margins can collapse. This is one of the least intuitive instances, where the margin-top of the child is apparently going right through the parent.
You can counter this by adding any amount of padding to the parent. I added 1px of padding-top and the margin suddenly appears to behave as originally expected:
.box {
width: 400px;
height: 400px;
background-color: red;
padding-top: 1px;
}
.inBox {
width: 200px;
height: 200px;
background-color: white;
margin-top: 100px;
}
<div class="box">
<div class="inBox">.inBox has margin-top</div>
</div>
As recommended by others I would also probably just use padding-top on the parent to create all of the space but this trick exposes an interesting nuance of margin collapse.
You can’t do margins inside an element. You can use padding. If you don’t want the padding to affect the side of the box, also set box-sizing: border-box.
Vertical margins have some unintuitive characteristics, like collapsing. There are ways to prevent vertical margin collapse that may solve your issue.
Related
So I'm found an article on responsive design (here) and I tried to make something like what it had on part of the tutorial. The site said to divid the size of the element by the size of the container that the element(s) are in. (the reason I divided by 1000 and not 1050 is because the margins on the div#main make it 1000px even though the header is 1050px) If that doesn't make sense than the link can explain it. It looks fine with my browser at full size, but if I shrink the window to much then it doesn't resize the way it should. I'm not exactly sure what part of my code is wrong but if someone could help me that would be great! Here's a link to the page I made. And here is my source code:
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
header {
height: 100px;
max-width: 1050px;
margin: 0 auto;
}
#main {
border-radius: 25px;
background-color: #aaa;
height: inherit;
max-width: inherit;
margin: 25px;
}
.box {
width: 47.5%;
height: 75%;
margin: 1.25%;
background-color: #444;
border-radius: 15px;
float: left;
}
</style>
</head>
<body>
<header>
<div id="main">
<span class="box">
</span>
<span class="box">
</span>
</div>
</header>
</body>
</html>
Maybe if I explain what's happening you'll see that there actually is no problem.
The inner boxes have a fixed height based on 75% of the parent container's height. Therefore, the heights of all elements stay the same. However, your margins are fractions of the parent element's width, therefore they change with the page width. As the page gets smaller, the margin gets smaller. Since a div naturally lies as high on the page as it can, it moves toward the border of its parent.
All this is expected with your design. To fix it, set fixed top and bottom margins:
.box {margin: 12px 1.25%;}
This is quite a highly discussed issue on the web, but after hours of research and trial and error, I am still unable to get the below HTML to behave as desired in IE 7, 8 or 9:
<html>
<head>
<title>Untitled Page</title>
<style>
.container {
white-space: nowrap;
overflow: auto;
position: absolute;
}
.childContainer {
float: left;
}
.box {
float: left;
border: 1px solid black;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="childContainer">
<div class="box"></div><div class="box"></div><div class="box"></div>
<!-- repeat until off screen -->
<div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="childContainer">
<span>This should not wrap!</span>
</div>
</div>
</body>
</html>
The desired behaviour is as follows:
.box elements must not wrap - a scroll bar should appear it the bottom of the window
.box elements must have a fixed width and height
.container and .childContainer cannot have a fixed width. The number of .box elements is arbitrary
must behave reasonably consistently in IE7+ and recent versions of Chrome and FireFox
The provided HTML works in Chrome, I believe it honours the white-space: nowrap even for block elements. I've tried using SPAN elements, but they need to be forced to be a block element with float: left or the width attribute is ignored. They then have the same issue as DIV elements.
I'm sure there must be a solution to this without using JavaScript, but that is an option if all else fails.
http://jsfiddle.net/hjCWN/
I haven't tried it in IE, but you could try removing white-space: nowrap; and replace it to margin-right: -99999px;
Put the boxes in a table. That seems to be the only practical approach.
When you try to make the .box elements appear in a row, the use of float: left has its own effect, which cannot be prevented by setting white-space, as it operates at a different level, so to say. But by putting them into a table row, you force them into a row.
You can even dispense with those elements and just style cells of a table:
<style>
table.boxes td {
border: 1px solid black;
width: 20px;
height: 20px;
padding: 0;
}
</style>
...
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>
I have a problem which I do not understand.
If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage).
But in fact those values are added to their size which I asume is wrong.
Is my expectation wrong?
The bellow example shows the issue. The both "divs" "left" and "right" I expect to be in a single line. If I remove "border" it works as expected.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
What you can do to fix this issue is to use box-sizing. See http://jsfiddle.net/Marwelln/YYkxK/
box-sizing:border-box
That's totally normal. It's not what you might expect at first, but CSS works that way.
Even without percentages:
#width {
width: 100px;
padding: 0 20px;
}
This #width div will occupy 140px. Works the same for percentages.
So you might need inner divs to achieve what you want.
<div class="left">
<div class="inner">
</div>
</div>
<div class="right">
<div class="inner">
</div>
</div>
.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }
Padding or Border always adds to an elements size, inside out.
Margin never adds to size but adds space outside the element.
Percentages or set values don't matter. The above is always true.
Reviewing the box model may help ---> HERE
When you use percentage as width (or height) values, these are the percentage of the width (or height) of the parent block element (containing block).
In super modern browsers you can use calc() to fix this: calc(80% - 2px). And yes, it is normal. If you set the width to 100px and border to 150px what would happen then if border wasnt added?
i am trying to vertically align a div inside another div at the bottom and i do not want to use relative/absolute positioning. below is my markup. it seems to work. but i am not sure whether this is the best solution. can anyone recommend a better way? also, in FF if i remove the border around the container, it stops working. does anyone know why?
thanks
konstantin
<html>
<head>
<style type="text/css">
.container
{
background-color: #ffff00;
height: 100px;
line-height: 100px;
border: solid 1px #666666;
}
.container .content
{
margin-top: 60px;
background-color: #ffbbbb;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">test</div>
</div>
</body>
</html>
Do use absolute positioning. I think it is probable that the reason you do not want to use absolute positioning is based on a misconception. Namely, if the container has the position attribute as well, absolute positioning will not be in regard to the whole page, but in regard to the container, and then you will get what you want with:
.container
{
position: relative;
}
.container .content
{
position: absolute;
bottom: 0px;
}
Now, no matter the sizes, your content will be will be at the bottom of the container.
That will work... only thing is you won't be able to put anything in the empty top 60 pixels.
I believe that if you're looking for the best solution, you should indeed use relative/absolute positioning.
Is there any specific reason that you're trying to avoid relative/absolute positioning?
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.