Saturday, August 11, 2012

Styling for inline elements

          HTML elements are displayed either in block or inline style:
  
                Block: Always displayed with new line before and after the element consuming the whole
width available by default.
                Inline: Does not force new lines before and after its placement consuming only necessary space by default.

         The span tag in HTML is an inline element by default (display:inline). When applied styles using CSS for a span element, some of the styles (like width, padding, etc) did not work when opened the page on an Android browser; it was the same issue on few web browsers too (IE 8 and Firefox 14).
         When the display style was overridden as "display:inline-block", the style changes worked on the Android browser.
         Please note that style "display:inline-block" places the HTML element as an inline element (i.e., elements are placed without line break) and also applies the styles which were not working with inline display.
         "display:block" also would work. However choosing betweem block/inline-block depends on the new line spacing requirement between HTML elements.

0 comments:

Post a Comment