How can I remove the space between text and div inside?

Question

I want to remove the space between texts and div inside. There's a picture of what I mean under space between text and div.

That space is really annoying. There is the style sheet and html:

div {
  display: inline-flex;
  line-height: 1;
  border: 2px solid rgb(204, 33, 33);
}

p {
  margin-inline: 10px;
  font-size: 30px;
  border: 2px solid rgb(204, 33, 33);
}

<div>
  <p>text</p>
  <p>text</p>
</div>

remove your margin. Or give your ```
``` a ```margin-top``` and ```margin-bottom``` of 0. I'm not sure which look you're trying to achieve. — Brandon, Aug 17 '21 at 14:10
And use the Inspector to see whether you're inheriting any padding on the div, too. — JohnP, Aug 17 '21 at 14:13

score 1 · Answer 1 · answered Aug 17 '21 at 14:22

margin-inline: 10px; this cause the issue you were facing, remove that and you get what you want.

div {
    display: inline-flex;
    line-height: 1;
    border: 2px solid rgb(204, 33, 33);
    padding: 0;
}

p {
    font-size: 30px;
    border: 2px solid rgb(204, 33, 33);
}

<div>
    <p>text</p>
    <p>text</p>
</div>

Serge · Accepted Answer · 2021-08-17T15:36:37.110

0

Change p to span and alter CSS:

div {
       ...
       ...
       padding: 10px;
}

span {
      margin: 10px 0;
      ...
      ...
}

Or increase the div padding and remove span's margin, depending on the resulting UI that you need

edited Aug 17 '21 at 15:36

answered Aug 17 '21 at 14:22

Serge

26
3

Thanks! It's working. – RolandHU Aug 17 '21 at 14:47

How can I remove the space between text and div inside?

2 Answers2