Margin-Top not working for span element?

by

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

From the specification:

Margin properties specify the width of the margin area of a box. The
‘margin’ shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These
properties apply to all elements, but vertical margins will not have
any effect on non-replaced inline elements.

Demo 1 (Vertical margin not applied as span is an inline element)

Solution? Make your span element, display: inline-block; or display: block;.

Demo 2

Would suggest you to use display: inline-block; as it will be inline as well as block. Making it block only will result in your element to render on another line, as block level elements take 100% of horizontal space on the page, unless they are made inline-block or they are floated to left or right.

1. Block Level Elements – MDN Source

2. Inline Elements – MDN Resource

More Related Contents:

  1. How can I remove space (margin) above HTML header?
  2. Remove “whitespace” between div element
  3. When to use margin vs padding in CSS [closed]
  4. CSS margin terror; Margin adds space outside parent element [duplicate]
  5. How do you easily horizontally center a using CSS? [duplicate]
  6. CSS Floating Divs At Variable Heights [duplicate]
  7. 2 column div layout: right column with fixed width, left fluid
  8. How to add a scrollbar to an HTML5 table?
  9. Center a div in CSS [closed]
  10. Font Awesome not working, icons showing as squares
  11. CSS: Margin-top when parent’s got no border
  12. How do I style the HTML5 form validation error messages with CSS?
  13. Right to Left support for Twitter Bootstrap 3
  14. override css for html5 form validation/required popup
  15. CSS values using HTML5 data attribute [duplicate]
  16. How would you make two s overlap?
  17. How to auto adjust the height according to content in it?
  18. layer on top of PDF
  19. why is my content showing outside the div?
  20. CSS Margin: 0 is not setting to 0
  21. How to get these two divs side-by-side?
  22. Why use an HTML5 semantic tag instead of div? [duplicate]
  23. How to display and hide a div with CSS?
  24. How to make responsive table [closed]
  25. Why adds extra top margin?
  26. Why box-sizing is not working with width/height attribute on canvas element?
  27. How do I make text bold in HTML?
  28. Center fixed div with dynamic width (CSS)
  29. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  30. Stacking DIVs on top of each other?

Leave a Comment