No new line added after first p tag

Question

I've been trying to remove the default new line after the first p but without any success. The second p should be underneath the first one, but not on the same line.

span {
  float: left;
  clear: left;
}

<div id="product-info">
  <p><b>Test Test</b></p>
  <p>Product Information:</p>

  <span>A: Test</span>
  <span>B: Test</span>
  <span>C: Test</span>
</div>

Can someone suggests some hints?

Zak · Accepted Answer · 2023-04-06T21:12:25.300

Use a single <p> tag, and use a line break <br />

The natural margin of <p> margin-bottom (below the element) of the tag is 1em. You can also remove that margin if you add

p {
    margin:0;
}

But if you like the margin, and just want the space between to two lines gone .. Just use line break.

span {
  float: left;
  clear: left;
}

<div id="product-info">
 <p>
    <b>Test Test</b>
    <br />
    Product Information:
 </p>

 <span>A: Test</span>
 <span>B: Test</span>
 <span>C: Test</span>
</div>

As a side note .. <span> is designed to be inline. So something like

<p> I like the color <span style="color:#FF0000"> red </span> </p>

would be an example of how it's meant to be used. For stacked elements, use the <div> tag instead, as it's display is naturally block and will stack naturally without the need for additional CSS rules:

<div>A: Test</div>
<div>B: Test</div>
<div>C: Test</div>

Paragraphs are semantic elements with accessibility and document structure considerations. They shouldn't be replaced with non-semantic elements for the sake of style. — isherwood, Apr 07 '23 at 02:52

score 1 · Answer 2 · answered Apr 06 '23 at 21:04

It's not a newline. It's margin. Use your browser's document inspector to see this. it looks like this in Chrome:

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    ...
}

Create custom classes to remove the margins below the first and above the second paragraph.

Then, if you want block-level elements, use block-level elements. Floats aren't a good layout strategy in the 21st century.

.no-margin-top {
  margin-top: 0;
}

.no-margin-bottom {
  margin-bottom: 0;
}

<div id="product-info">
  <p class="no-margin-bottom"><b>Test Test</b></p>
  <p class="no-margin-top">Product Information:</p>

  <div>A: Test</div>
  <div>B: Test</div>
  <div>C: Test</div>
</div>

score 1 · Answer 3 · answered Apr 06 '23 at 21:05

Remove the margin.

span {
  float: left;
  clear: left;
}

#product-info > p:first-of-type {
  margin-bottom: 0;
}
#product-info > p:last-of-type {
  margin-top: 0;
}

<div id="product-info">
  <p><b>Test Test</b></p>
  <p>Product Information:</p>

  <span>A: Test</span>
  <span>B: Test</span>
  <span>C: Test</span>
</div>

No new line added after first p tag

3 Answers3