html - Why is not the image effected when I use margin-left -
this question try understand example , works should. have set styling margin:0 0 0 98px; on selector #sweden dd , want know reason why can image keep it's position when use above styling on #sweden dd. mean when use margin used push surrounding elements away specified space in case 98px placed between description element(dd) , image.
here complete markup , css
<!doctype html> <html> <head> <style type="text/css"> body { font-family:arial, sans-serif; font-size:small; padding:0; margin:0; } #sweden { float:left; width:300px; padding:10px 0; border:2px solid #c8cdd2; } #sweden dl /* block element */ { float:left; margin:10px 20px; padding:0; } #sweden dt /* block element */ { float:right; width:162px; margin:0; padding:0; font-size:130%; letter-spacing:1px; color:#627081; background:blue; } #sweden dd { padding:0; margin:0 0 0 98px; /*keep text lined in column */ font-size:85%; line-height:1.5em; color:#666; background:red; } #sweden dl dd.img { margin:0; padding:0; } #sweden dd.img img { float:left; margin: 0 8px 0 0; padding:4px; border:1px solid #d9e0e6; border-bottom-color:#c8cdd2; border-right-color:#c8cdd2; background:#fff; } </style> <meta charset="utf-8" /> <title>chapter 3</title> </head> <body> <div id="sweden"> <dl> <dt>stockholm</dt> <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="gamla stan" /></dd> <dd>this taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan. taken in gamla stan</dd> </dl> </div> </body> </html>
#sweden dl dd.img is more specific than
#sweden dd so margin of first applied. read more css priority rules understand issue. in particular case margin of first applied.
Comments
Post a Comment