Extra 1px space between child and parent depending of the text's child

Question

I have a container with width/height on auto and its child with width/height 100%, i'm using box-sizing: border-box; on the child so that's not the solution.

As you can see on the screenshot below, there is an extra space (the white lines). It changes depending of the text inside the child.

https://jsfiddle.net/68uh1efq/

https://stackoverflow.com/a/45234850 That answer will solve your problem — Mo., Nov 07 '20 at 14:58

score 1 · Answer 1 · answered Nov 07 '20 at 15:06

this is happening because of display property

try using this

.example {   
  display:inline-block;
  position:relative;
  width:auto;
  height:auto;
  background-color:white;
  border:22px solid green;
  text-decoration:none;
    padding:20px 20px;
    background-color:blue;
    color:white;

}

.example div { 
  box-sizing: border-box;
  position:relative;
  display:block;
  width:100%;
  height: 100%;
  background-color:blue;
  border:none;
  /* padding:20px 20px; */
  padding:20;
  margin:0;
  color:#fff;
  vertical-align:bottom;
}

Extra 1px space between child and parent depending of the text's child

1 Answers1