1

I want to remove the space between the <p> inside this code:

CSS:

.ban {
  position: relative;
  display: inline-block;
  height: 500px;
  width: 500px;
  background-color: purple;
  text-align: center;
}
p {
  display: inline-block;
  width: 248px;
  background-color: beige;
  margin: 0px;
  vertical-align: top;
}

HTML: (I don't think I can use a div to be outside of a p)

<div class="ban">
  <p>
     text
  </p>
  <p>
     text
  </p>
  <p id="text">
    text
  </p>
</div>

image of the space to be removed

j08691
  • 204,283
  • 31
  • 260
  • 272
kyu
  • 111
  • 1
  • 10

2 Answers2

1

If the content of the <p>s are constant, meaning you change them, and they're not dynamic, then simply add a fake div to cover up the space like follows:

.ban {
  position: relative;
  display: inline-block;
  height: 500px;
  width: 500px;
  background-color: purple;
  text-align: center;
}
p {
  display: inline-block;
  width: 248px;
  background-color: beige;
  margin: 0px;
  vertical-align: top;
}
  div.fake {
    height: 72px;
    width: 10px;
    background: beige;
    position: absolute;
    z-index: 10;
    left: 253px;
  }
<div class="fake"></div>

<div class="ban">
  <p>
     text<br>more<br>frikin<br>text<br>to<br>take<br>up<br>space
  </p>
  <p>
     text<br>some<br>other<br>text
  </p>
  <p id="text">
    text<br>hi<br>how<br>are<br>you
  </p>
</div>
kzhao14
  • 2,470
  • 14
  • 21
0

display: inline-block have that inconvenience. If you put a return character between the elements that small space appears. To avoid that you need to put all elements together:

<div class="ban">
    <p>text</p><p>text</p><p id="text">text</p>
</div>

Look at this jsfiddle.

Try to separate the paragraphs and you'll see the result.

ElChiniNet
  • 2,778
  • 2
  • 19
  • 27