CODEWITHSUNDEEP
htmlcss
user7619288
user7619288

Reputation:

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

Adding a margin to the div pushes the right column off the edge of the screen to the right.

I have tried adding margins to both and , altering widths and even removing a width property from the CSS altogether.

With no margin at all, the 3 columns fit the width of the screen perfectly with a default tiny margin showing the background colour of my page. Adding ANY margin to messes the whole thing up.

<HTML>
<main>
    <section>
    Some text 1
    </section>

    <section>
    Some text 2
    </section>

    <section>
    Some text 3
    </section>
</main>


CSS

<<<<<<<SOME MEDIA QUERIES TO MAKE IT ADAPTABLE FOR MOBILE>>>>>>>

@media (min-width: 620px) {
main {
    column-count: 2;
}
section {
    break-inside: avoid;
}
}

@media (min-width: 960px) {
    main {
        column-count: 3;
    }
}


<<<<<<<<<<<<NORMAL CSS>>>>>>>>>>>>>>

main {
    width: 100%;
    margin-right: 5%;  <<<<<PROBLEM AREA
    margin-left: 5%;
}

section {
    height: 25%;
    margin-bottom: 5%;
    padding: 20px;
    display: inline-block;
}

I would like a 5% margin on the left and right of the div with no margin between the divs.

Upvotes: 1

Views: 4118

Answers (2)

ray
ray

Reputation: 27275

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>

Upvotes: 3

Varun Sukheja
Varun Sukheja

Reputation: 6526

enter image description here

Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. 
Total width here becomes:

300px (width)
+ 100px (left + right padding)
+ 30px (left + right border)
+ 40px (left + right margin)
= 470px
</div>

Upvotes: 1

Related Questions