html - Reason for specifying height on inline span element -
i wonder point specify height on span element when inline element. appearance doesn't change no matter value set on height span selector.
here complete markup , css
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>relative positioning</title> <style type = "text/css"> p { font-size: 1.3em; font-family: verdana, arial, sans-serif; } span { color: red; font-size: .6em; height: .6em; } .super { position: relative; top: -1ex; } .sub { position: relative; bottom: -1ex; } .shiftleft { position: relative; left: -1ex; } .shiftright { position: relative; right: -1ex; } </style> </head> <body> <p>the text @ end of sentence <span class = "super">is in superscript</span>. </p> <p>the text @ end of sentence <span class = "sub">is in subscript</span>. </p> <p>the text @ end of sentence <span class = "shiftleft">is shifted left</span>. </p> <p>the text @ end of sentence <span class = "shiftright">is shifted right</span>. </p> </body> </html> //tony
as long <span>-element defined inline-element (its default) value height won't have effect.
from w3.org specs 10.5 content height: 'height' property:
this property not apply non-replaced inline elements. see the section on computing heights , margins non-replaced inline elements rules used instead.
Comments
Post a Comment