Margin not appearing

Question

I wish my margin was also on the top of the text just like it is on the sides and the bottom

.text_line {
  border: solid black 2px;
  margin: 60px;
  padding: 40px;
}

<Section>
  <span class="text_line">Isso é um teste 1</span>
  <span class="text_line">Isso é um teste 2</span>
</Section>

This is how it looks:

[edit]

actually i didnt know it was happening because a span element is linear. It took me quite a while to find it out

if you add `display: inline-block;` to `.text_line` is that the output you were expecting to get? — Ramon de Vries, Oct 05 '22 at 17:50

score 0 · Answer 1 · answered Oct 05 '22 at 17:50

0

Unlike div or p tags which are Block Level elements which can take up margin on all sides, span cannot as it's an Inline element which takes up margins horizontally only.

See: Margin-Top not working for span element?

answered Oct 05 '22 at 17:50

Wayne Celestin

149
1
6

Margin not appearing

1 Answers1