Jump to content

How to add a new line between elements in HTML..

Wictorian

I will almost have to go to page two of google and I couldnt do this. 

 

Basically I have 2 h3 elements each containing a span and I wanna add a newline in between

 

Link to comment
Share on other sites

Link to post
Share on other sites

Something like

<h3>
    <span>etc</span>
</h3>
<br>
<h3>
    <span>etc</span>
</h3>

?

Link to comment
Share on other sites

Link to post
Share on other sites

add some padding to the top/bottom of the elements to have some room in between?

 

it's webdesign, not a word document. if there should be text in between, add a paragraph tag, if there shouldnt be text in between you adjust the padding.

Link to comment
Share on other sites

Link to post
Share on other sites

3 minutes ago, A42H said:

Something like

<h3>
    <span>etc</span>
</h3>
<br>
<h3>
    <span>etc</span>
</h3>

?

yeah I have done this but it doesnt work

Link to comment
Share on other sites

Link to post
Share on other sites

2 minutes ago, manikyath said:

add some padding to the top/bottom of the elements to have some room in between?

 

it's webdesign, not a word document. if there should be text in between, add a paragraph tag, if there shouldnt be text in between you adjust the padding.

how do I add padding between the elements?

Link to comment
Share on other sites

Link to post
Share on other sites

1. Stick them in a parent element that is set to display: flex and has a specific gap.

<div style='display: flex; flex-direction: column; gap: 2em;'>
  <h3>
      <span>etc</span>
  </h3>

  <h3>
      <span>etc</span>
  </h3>
</div>

 

2. Use multiple <br /> elements between each <h*> element that you have, depending on how many line-breaks you want between your <h*> elements.

<h3>
    <span>etc</span>
</h3>

<br />
<br />

<h3>
    <span>etc</span>
</h3>
Link to comment
Share on other sites

Link to post
Share on other sites

15 hours ago, Toxocious said:

1. Stick them in a parent element that is set to display: flex and has a specific gap.

<div style='display: flex; flex-direction: column; gap: 2em;'>
  <h3>
      <span>etc</span>
  </h3>

  <h3>
      <span>etc</span>
  </h3>
</div>

 

2. Use multiple <br /> elements between each <h*> element that you have, depending on how many line-breaks you want between your <h*> elements.

<h3>
    <span>etc</span>
</h3>

<br />
<br />

<h3>
    <span>etc</span>
</h3>

1. solution works but messes up the style otherwise.

 

2. solution doesnt work. However I think there is another mistake because why dont this and things I mentioned in the OP work?

Link to comment
Share on other sites

Link to post
Share on other sites

</br>

 

Link to comment
Share on other sites

Link to post
Share on other sites

1 hour ago, fpo said:
</br>

 

yeah it doesnt work.probably something else is wrong.

Link to comment
Share on other sites

Link to post
Share on other sites

On 9/1/2022 at 1:25 PM, Wictorian said:

1. solution works but messes up the style otherwise.

 

2. solution doesnt work. However I think there is another mistake because why dont this and things I mentioned in the OP work?

Both of these work just fine with no CSS styling applied; I double checked them myself.

 

That being said, with both of these solutions I imagine you'd want to be using CSS styles to style all of this in the way that you want.

Fixing your CSS is the only way to style this in the exact way that you want.

Link to comment
Share on other sites

Link to post
Share on other sites

1 hour ago, Toxocious said:

Both of these work just fine with no CSS styling applied; I double checked them myself.

 

That being said, with both of these solutions I imagine you'd want to be using CSS styles to style all of this in the way that you want.

Fixing your CSS is the only way to style this in the exact way that you want.

ok how do I do that?

Link to comment
Share on other sites

Link to post
Share on other sites

23 hours ago, Wictorian said:

ok how do I do that?

You have to start learning all about CSS.

Here's a good resource for modern practices and information: https://web.dev/learn/css/

I recommend playing around with the basics: background, background-color, color, font-family, font-size, display, grid, etc. and the like.

8 hours ago, Sakuriru said:
  <h3 style="bottom-margin: 1em;">
      <span>etc</span>
  </h3>
  <h3>
      <span>etc</span>
  </h3>

Why use flexbox when you can just inject it this way?

In most/all browsers, all text heading elements (h1, h2, etc.) have margin of 1em by default, so this wouldn't do anything.

Link to comment
Share on other sites

Link to post
Share on other sites

  • 2 weeks later...

add the text

&nbsp;

It says that you want to have a blank line there, usually it trims the whitespaces.

If you want one or more lines then use the line break element <br>

 

Right click on the element and open the inspector, maybe the element has a style applied to it from somewhere else?

Edited by KitCode
Link to comment
Share on other sites

Link to post
Share on other sites

  • 3 weeks later...
On 9/4/2022 at 8:18 PM, Toxocious said:

You have to start learning all about CSS.

Here's a good resource for modern practices and information: https://web.dev/learn/css/

I recommend playing around with the basics: background, background-color, color, font-family, font-size, display, grid, etc. and the like.

In most/all browsers, all text heading elements (h1, h2, etc.) have margin of 1em by default, so this wouldn't do anything.

This would be a good chance for OP to practice experimenting with different values using Browser Dev tools to find a spacing that works for them. Starting from 1em, they can open up the dev tools with F12 and then play around with the value until there is an amount of space between the elements that they like. 

Link to comment
Share on other sites

Link to post
Share on other sites

On 9/4/2022 at 6:20 PM, Sakuriru said:
  <h3 style="bottom-margin: 1em;">
      <span>etc</span>
  </h3>
  <h3>
      <span>etc</span>
  </h3>

Why use flexbox when you can just inject it this way?

It's "margin-bottom".

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×