Question 42981 in Html Question posted in
Some basic documentation can be found here.

No new line added after first p tag – Html

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?

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search