Spacing between text in a flexbox container

Hello everyone,

I’m new here and learning HTML5 and CSS3.
I’d would like to add spacing between the text but for some reason, I can’t figure it out.

Hey there,

nice to meet you! :wave:

It would be awesome to see an example of your project on codepen, so that we can fiddle around with it.

Looking forward to seeing it!

1 Like

Please define which text you want the spacing between: individual letters/numbers, words, sentences, paragraphs.

Hi, Nice to meet you too :slight_smile:

I think I was able to figure it out yesterday. I had to add padding to the a:link section. It’s working now. Here’s the code on CodePen

Well done.
If you add margin, you will create distance between the elements. Padding creates distance between the border and the content, but the elements are still touching.

Add a background colour to your links. see how the links are still touching.
Duplicate the padding line, and then change padding to margin on one of those lines. See what happens.

Another thing you can research is justify-content: space-around, and justify-content: space between, which will apply space around/between elements.

Thanks :slight_smile: I’m not seeing the words touching on my end. I changed the background color to red to see if everything looks good, and they seem to be fine. As far as I know, padding is for the inside and margin is for the outside, so I added padding to make space between each word. I hope I’m not missing something here. Here’s the link

My thanks to all of you for the input :grinning:

Yes, you are right about which parts of the ‘box’ padding and margin affect.

This is what I mean.
With padding only, which can take a colour:

With margin and padding; the margin creates whitespace:

With only margin:

The way I think about margin and padding is that margin is for spacing around and between elements, and padding is spacing inside the element, with colour or without colour.

Thinking about that, I would personally use margin to create whitespace around the outside of the elements’ content, and perhaps use padding if I wanted to apply a background colour.

Let’s say I have some paragraphs stacked down a page.
I would set a top and bottom margin between each paragraph. If I had a border or colour background applied to the paragraphs, I would use padding to push the content away from the border or coloured edges.

You’re a wonderful teacher lee :slight_smile: Thanks for pointing me in the right direction. Much appreciated.

You’re welcome.

I always add backgrounds or borders to some elements so I can see the layout as I create it.
It’s easy to type the wrong number or choose the wrong property as we learn, so a coloured or bordered container makes identifying problems easier.

Yeah, it makes things much easier. :+1:

Having learned a lot about HTML and CSS, should I specialize is some website building platform such as WordPress or Bootstrap?