html - How to fix the alignment/position of a image label (for checkboxes/radio buttons)? -


code taken 2 different sources, append dont have 10 rep post them.

first attempt. notice horribly placed radio buttons.

second attempt. donot know source, direct google result. notice difference between top , bottom padding/alignment.

i tried using [li] element didnt work.

adding img{display: block;} css gives unexpected results. "fills" whole element image, , left part of image hidden behind green part.

i self-professed css/html noob, can understand things , simple things placement/alignment still mystery me.

i'd know how code works. planning add green border "selected" "button" , change minor visual stuff. i'd know how center "tick" , implement "tick" mark locally/globally , not rely on content:'\2714';.

help me understand happening here, , how can fix (and apply knowledge in future).

edit : updated 2nd attempt, looking quite good, imho. if alignment fixes.... sigh.

ok, sound silly...

i added :

img {   display:block;   margin: 5px 5px 5px 45px; } 

and edited margins... working properly.

but still dont understand why there bad space @ bottom.

here's new version : http://jsfiddle.net/xwussun1/5/

**edit : ** fixed tick mark position adding line-height: 6;.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -