Margin Goes Outside Div When Border Is Removed

Margin goes outside div when border is removed

Because margins are evil (and tend to collapse -> is it a bug? margins of P element go outside the containig div). In your case you can simply add overflow:hidden; to .outer

http://jsfiddle.net/yhAaQ/

CSS margin terror; Margin adds space outside parent element

Add overflow:auto to your #page div.

jsFiddle example

And check out collapsing margins while you're at it.

Adding margin to div pushes it off the screen

Use CSS Flex

/*QuickReset*/ * { box-sizing: border-box; margin: 0; }

html {
  height: 100%;
}

body {
  background: black;
  height: 100%;
  position: relative;
  
  display: flex; /* Use flex! */
  padding: 5px; /* Instead of children margin */
  /* gap: 5px; /* Uncomment to add a gap between your child elements! */
}

.one,
.two {
  border: 3px solid green;
  border-radius: 5px;
}

.one { width: 10%; background: red;  }
.two { width: 90%; background: blue; }

<div class="one">
</div>
<div class="two">
</div>

Why is adding or removing a border changing the way margins work?

The specific answer to your question is collapsing margins and is part of the W3C's BOX MODEL specifications:

---

Vertical margins may collapse between certain boxes:

• Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin 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 absolute maximum of the negative adjoining margins is deducted from zero. Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.
• Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• Vertical 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.
• Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
• Margins of inline-block elements do not collapse (not even with their in-flow children).
• If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
  
  • If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
  • Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.

An element that has had clearance applied to it never collapses its top margin with its parent block's bottom margin.

Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
Margins of the root element's box do not collapse.

---

So, when you add a border, you're doing exactly what the specification says, therefore you have no margin.

There are many ways and fixes and hacks to solve this, but to me, the most direct and easy is as simple as to apply an overflow:auto; property to the div you want to clear the margin.

Thus, in your CSS, you would only need to change it like this:

.second-div
{
    background-color: blue;
    min-height: 50px;
    overflow:auto;
}

I forked your fiddle with even more border so you can notice the effect and see how good it works

Margin/padding comes outside a div

Specifying px instead of percentage in this case will fix the issues.

You can view on codepen as well - https://codepen.io/Ilima/pen/gzVWJB?editors=1100

.featured_box {  max-height: 500px;  overflow: hidden;  position: relative;  width: 80%;  margin: 0 auto;  overflow: hidden;}
.featured_image {    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg);    overflow: hidden;    position: relative;    background-size: cover;    background-repeat: no-repeat;    background-position: center;    height: 500px;    width: 100%;}.featured_image:after {  content: '';  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  display: block;  background-color: rgba(0, 0, 0, 0.5);}
.featured_title{  margin-top: 360px;  position: relative;  z-index: 1;  font-size: 2rem;  color: #fff;  text-align: center;}

<div class="featured_box">    <div class="featured_image">      <p class="featured_title"> Text goes here </p>  </div></div>
<div class="browser"></div>

Why does adding a margin to my div push its content (columns) off the page?

CSS margins are added to the outside of the element. If you have a <div> with a width of 100% and you add 5% margin on both sides, that element is now 110% wide.

If you want to add margins you have to account for them in the element's width. If both the width and margins are percentages, you can just subtract the margin:

main {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

If width and margin are using different units (e.g. width: 100%, margin: 24px), you can use css calc:

main {
  width: calc(100% - 48px);
  margin-left: 24px;
  margin-right: 24px;
}

In the snippet below, the only difference between the first row and the second is the margin. Notice that the boxes themselves are the same size. The margin is added outside the box.

* {  box-sizing: border-box;  padding: 0;  margin: 0;}
.grid {  background-color: white;  background-image: linear-gradient(transparent 24px, #999 25px), linear-gradient(90deg, transparent 24px, #999 25px);  background-size: 25px 25px, 25px 25px;  background-position: 1px 1px;  height: 100vh;}
.container > div {  display: inline-block;  width: 100px;  background: bisque;  margin: 0 21px 22px 0;  min-height: 50px;}
.container.second > div {  background: tomato;  margin: 0 46px 15px 0;}

<div class="grid">  <div class="container first">    <div></div>    <div></div>    <div></div>    <div></div>  </div>
  <div class="container second">    <div></div>    <div></div>    <div></div>    <div></div>  </div></div>

Why does span break outside div when margin and padding is applied?

To answer your question, this isn't just an issue with padding or margin, but also with width, display, and the box model.

jsFiddle

span {
    display: inline-block;
}

This will honor any padding, margins, or widths you apply to the span.

Why does inner DIV spill out of outer DIV?

Because of the margin - the width is 100% PLUS the margin. To avoid that, write width: calc(100% - 10px); (= twice the margin.) Same for height.

#outer {  position: fixed;  width: 30%;  height: 30%;  background-color: black;}#inner {
  width: calc(100% - 10px);  height: calc(100% - 10px);  margin: 5px;  background-color: orange;}

<div id="outer">  <div id="inner">  </div></div>

how can i make a padding keeps outside of my div

I understand your objective, but you have to adjust the code.

With the flexbox approach, you can:

1. Use a flex-div to hold your items with: .sectionWithTopPick { display: flex; }
2. Inside it, use a div to hold the content, and tell the div how to fit the parent flex-box with flex-grow: 0; flex-shrink: 1; flex-basis: 25% (this tells to the inside div to never grow beyond 25%, but to shrink if necessary). This div also has the padding.
3. Select the first item with :fisrt-child and remove left-padding
4. Select the last item with :last-child and remove right-padding
5. Use another div to contain the item's contents, and make it's image fill 100% of the space.

Here a codepen with working solution

margin-top moving along with the #section div?

You can apply padding-top: 50px to #section rather than margin-top to .column

Referring from Mozilla Documentation:

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Read about Margin Collapsing for more details.

*{ padding:0; margin:0; }
body{ width:100%; font-family:"Source Sans Pro" }#section{height:400px; background-color:#383838; color:White; padding-top: 50px; }span{  font-size:40px; }.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}

<html><head>    <title>Breadth</title>    <link rel="Stylesheet" type="text/css" href="breadth.css" />    <link href="fonts.css" rel="stylesheet" type="text/css" />    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" /></head><body>    <div id="main">        <div id="section">            <div class="column">                <span class="icon icon-cogs"></span>                <h2>Maecenas lectus sapien</h2>                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>            </div>        </div>    </div></body></html>

---

Related Topics