0

.text-overflow{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 30%;
  height: 150px;
  max-height: 150px;
  background-color: white;
  border: 1px solid black;
}
.sub1{
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  background-color: rgba(165, 90, 90, 0.4);
}
.sub2{
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  background-color: rgba(91, 96, 163, 0.4);
}
<section>
    <div class="text-overflow">
        <div class="sub1"></div>
        <div class="sub2">
            <p></p>
        </div>
    </div>
</section>

you can see in the following, there is some white space that I don't know where they came from?!

enter image description here

Would anybody help me get rid of this issue?

Ahmad MRF
  • 1,346
  • 1
  • 6
  • 16
Hossein
  • 142
  • 10
  • 3
    A `

    ` has by default a `margin-top: 1em; margin-bottom: 1em` so even an empty `

    ` generates space... Change to `p { margin: 0; padding: 1em 0 }` and the space will disappear as padding collapses in an empty `

    `.

     – Rene van der Lende Jan 29 '22 at 23:49
  • BTW: [w3schools: HTML Element Reference](https://www.w3schools.com/tags/default.asp) will show HTML elements default values at the bottom of their respective pages... – Rene van der Lende Jan 29 '22 at 23:54
  • @RenevanderLende You made me get rid of this issue! Thanks a lot. – Hossein Jan 30 '22 at 00:33
  • yw, here's a nice post on the use of `margin` I just now came accross: [The Rules of Margin Collapse](https://www.joshwcomeau.com/css/rules-of-margin-collapse/). But actually, I hardly ever use margins at all. I prefer the `* { box-sizing: border-box }` and set all default margins to 0 and use `padding` instead. – Rene van der Lende Jan 30 '22 at 01:43

2 Answers2

1

Try adding this to your CSS:

 * { 
         margin: 0px;
         padding: 0px;
         box-sizing: border-box;
 }
Fanis G
  • 66
  • 1
  • 7
0
p {
  margin: 0;
}

This will work :) but to be honest I m not sure why it happend in this case.

Lucie
  • 185
  • 10
  • Oki, how @Rene van der Lende told in comments, its by default.. – Lucie Jan 29 '22 at 23:58
  • Yes, the problom was with the margin of

    tag! I just added `margin:0;` to `.sib2 p` inside `style.css` and then everything became ok!

     – Hossein Jan 30 '22 at 00:30