Trying to add spacing between a video and text

HTML-CSS
#1

Tell us what’s happening:
I have a video and a span element which are vertically aligned. I want to add spacing between them and make the span element bigger, but whenever I do that the span element goes on top of the video. I’ve tried adding padding and margins to both the div which contains them, the span element, and the video element and none of those have worked.

Your code so far
https://codepen.io/jalal_b/pen/ZEpmzzX

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

HI @jalal_b!

Span tags are inline elements. You could set it to block and then use the margin property from there.

1 Like
#3

Thanks for the reply! I set the span element to display:block, but that also set it on top of the video. Am I doing something wrong?

EDIT: I now realized you meant that I should set the display of #history to block. It worked! But now if I change the font size, it goes back on top of the video. Any ideas? @jwilkins.oboe

#4

The div element is already block level so you don’t need to set that to block.

I thought you wanted to create this

Screen Shot 2021-01-14 at 10.56.40 AM
Screen Shot 2021-01-14 at 10.56.40 AM1544×662 69.2 KB

#5

Sorry I should’ve been more clear. I want the “History” to be to the left of the video. It is in that position right now, but if I adjust the font size then it gets sent back to the top, as seen in your image. Same thing if I set the margins past a certain size. I’m wondering why it gets sent back to the top if I change the margin or font size.

#6

oh ok.

You can use display flex for the history div and then mess around with the spacing from there.

1 Like
#7

That article is super helpful and it led me to figuring it out! Thanks so much!!

1 Like