Margin-Top not working for span element

Question

Can someone tell me what I coded wrong  Everything is working  the only thing is that there is no margin at the top   HTML    lt div id  contact us  gt   lt  -- BEGIN CONTACT US -- gt     lt span class  first title  gt Contact lt  span gt     lt span class  second title  gt Us lt  span gt     lt p class  content  gt For any questions whatsoever please contact us through the following e-mail address  lt  p gt  lt  br gt  lt  br gt     lt p class  e-mail  gt info e-mail com lt  p gt  lt  br gt  lt  br gt  lt  br gt  lt  br gt     lt p class  read more  gt  lt a href  underconstruction html  gt Read More lt  a gt  lt  p gt   lt  div gt   lt  -- END CONTACT US -- gt    CSS   span first title     margin-top  20px    margin-left  12px    font-weight  bold    font-size  24px    color   221461     span second title     margin-top  20px    font-weight  bold    font-size  24px    color   b8b2d4

User · Answer

Looks like you missed some options  try to add    position  relative  top  25px

User · Answer

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

User · Answer

span element is display inline  by default you need to make it inline-block or block  Change your CSS to be like this  span first title       margin-top  20px      margin-left  12px      font-weight  bold      font-size 24px      color   221461        The change       display inline-block    or display block

User · Answer

span is an inline element that doesn t support vertical margins  Put the margin on the outer div instead

User · Answer

Always remember one thing we can not apply margin vertically to inline elements  if you want to apply then change its display type to block or inline block for example span display inline-block

[css] Margin-Top not working for span element?

Examples related to css

Examples related to margin

Examples related to html