Why is there a padding around flexbox containers?

Question

There seems to be a padding around the container and in between the two columns. How do I get rid of them?

I tried setting margin and padding to 0 but it did not work.

https://i.stack.imgur.com/i5XJJ.jpg

body,
html {
  width: 100%;
  height: 100%;
}

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}

.flexbox img {
  width: 100%;
  height: auto;
}

@media all and (max-width: 650px) {
  .flexbox {
    width: 100%;
  }
}

@media all and (min-width: 651px) {
  .col-1,
  .col-2 {
    width: 50%;
  }
  .col-3 {
    width: 100%;
  }
}

<main id="container">
  <div class="flexbox col-1">
    <img src="http://placehold.it/800x400/f00/000?text=1" />
  </div>
  <div class="flexbox col-2">
    <img src="http://placehold.it/800x400/0f0/000?text=2" />
  </div>
  <div class="flexbox col-3">
    <img src="http://placehold.it/800x400/06f/000?text=3" />
  </div>
</main>

Thank you in advance!

That's why it happens because img is inline. Add `display: block;` to `.flexbox img` — Grzegorz T., Aug 15 '19 at 11:37
thank you @GrzegorzT. That worked, and I added margin: 0; to html to get rid of the borders. — ahto design, Aug 15 '19 at 11:39

score 0 · Answer 1 · edited Aug 15 '19 at 11:42

0

In HTML every Element has default properties. I think this padding exists because of the <div> Element. To remove it, you can set

.flexbox { padding: 0 }

edited Aug 15 '19 at 11:42

Druckles

3,161
2
41
65

answered Aug 15 '19 at 11:31

Arthurofos

198
1
12

@Druckles thx for the correction. – Arthurofos Aug 15 '19 at 11:44

Why is there a padding around flexbox containers?

1 Answers1