娣卞叆鐞嗚ВCSS1.涔嬪墠宸茬粡涓ゅ懆澶氭病鍐欐枃绔犱簡锛屾墜鐥掔棐鐨勩€傛垜瓒佺潃鍏徃瑁呬慨銆傝繖鍛ㄥ湪瀹跺姙鍏紝鍏徃椤圭洰涓嶆€ワ紝鎵€浠ユ娊绌烘⒊鐞嗕簡涓€涓婥SS涓璴ine-height鐨勭悊瑙ｃ€傚畠灏嗕簬浠婂ぉ鍙戝竷銆備綘鍑嗗濂戒簡鍚楋紵2.鍩烘湰姒傚康2.1琛岄珮鐨勫畾涔夊強璇存槑琛岄珮锛岄【鍚嶆€濅箟锛屾槸鎸囦竴琛屾枃瀛楃殑楂樺害銆傛牴鎹畾涔夛紝瀹冩槸涓よ鏂囨湰涔嬮棿鐨勫熀绾夸箣闂寸殑璺濈銆傞偅涔堥棶棰樻潵浜嗭紝浠€涔堟槸鍩虹嚎锛熷洖鎯充竴涓嬶紝鍒氬紑濮嬪涔犳眽璇嫾闊崇殑鏃跺€欙紝鎴戜滑鐢ㄧ殑鏄洓琛屾牸瀛愪功鐨勫洓琛岋紝鍊掓暟绗簩琛屾槸baseline銆傚鏋滀綘璇达紝瀵逛笉璧凤紝鎴戝凡缁忓叏閮ㄨ繕缁欒€佸笀浜嗭紝鎴戞病鏈夊嵃璞′簡銆傚懙鍛碉紝鍒潃鎬ワ紝鎴戝凡缁忕粰浣犲噯澶囧ソ浜嗭紝璇风湅涓嬪浘锛屽叾涓璦銆乧銆乪銆亁銆亃绛夊瓧姣嶇殑搴曠嚎锛堝€掓暟绗簩琛岋級灏辨槸鎴戜滑鎵€璇寸殑鍩虹嚎銆備簡瑙ｄ簡baseline鐨勫畾涔夛紝鎴戜滑鍐嶆潵璇磋line-height銆備笂闈㈡垜浠浜嗭紝琛岄珮灏辨槸涓ゆ潯鍩虹嚎涔嬮棿鐨勮窛绂伙紝濡備笅鍥炬墍绀恒€傚悇浣嶆槸涓嶆槸宸茬粡馃槗浜嗭紝鑰愬績浠旂粏鐪嬩笅锛屽叾瀹炴尯瀹规槗鐞嗚В鐨勶細涓ゆ潯绾㈢嚎涔嬮棿鐨勮窛绂诲氨鏄痩ine-height銆備笂涓€琛岀殑搴曠嚎鍜屼笅涓€琛岀殑椤剁嚎涔嬮棿鐨勮窛绂诲氨鏄闂磋窛銆備笟鐣岀殑鍏辫瘑鏄細琛岄棿璺?琛岄珮-em-box锛堟殏鏃剁悊瑙ｄ负font-size鐨勫ぇ灏忥級锛屽洜姝わ紝鐢–SS璇█鏉ヨВ閲婅闂磋窛鏄細line-spacing=line-height-font-灏哄銆傚悓涓€琛岀殑椤剁嚎鍜屽簳绾夸箣闂寸殑璺濈灏辨槸font-size銆傞鍏堜竴鍗婂氨鏄鍏堜竴鍗娿€傜粨鍚堜笂闈㈢殑鍥炬枃璇存槑锛屽叾瀹炲緢瀹规槗鎼炴竻妤氳楂樸€佽闂磋窛銆佸崐琛岄棿璺濄€乫ont-size鐨勫惈涔夈€傝繖浜涘畾涔夊ぇ瀹朵竴瀹氬緢娓呮锛屽洜涓轰笅闈㈢殑鍐呭閮芥槸鍜岃繖浜涘畾涔夌浉鍏崇殑銆?.2鍐呭鍖恒€佽鍐呮銆佽妗嗐€佸寘鍚鎵€璋撳浘鎶靛崈瑷€锛氬唴瀹瑰尯锛氬唴瀹瑰尯鍙互澶ц嚧鐞嗚В涓哄湪FireFox/IE娴忚鍣ㄤ腑閫変腑鏂囧瓧鐨勮儗鏅尯鍩?涓婂浘涓紝娣辩伆鑹茶儗鏅尯鍩熶负鍐呭鍖哄煙銆傝鍐呮锛氭瘡涓鍐呭厓绱犻兘浼氱敓鎴愪竴涓鍐呮锛岄珮搴︾瓑浜巉ont-size銆傚綋鎴戜滑璁剧疆line-height鏃讹紝琛屽唴妗嗙殑楂樺害淇濇寔涓嶅彉锛岃€屾敼鍙樹簡琛岄棿璺濈殑楂樺害銆侺inebox锛氭槸鎸囦竴涓櫄鎷熺殑绾挎潯鐭╁舰妗嗭紝鐢眑ine涓殑inlineboxes缁勬垚銆傚綋鏈夊琛屽唴瀹规椂锛屾瘡涓€琛岄兘鏈夎嚜宸辩殑琛屾銆侰ontainmentbox锛氭妸涓婇潰涓変釜鐩掑瓙鍖呰捣鏉ョ殑鐩掑瓙锛屾檿锛岀湅鍥惧氨鐭ラ亾浜嗭紝涓婇潰閭ｄ釜榛勮壊鐨勭洅瀛愬氨鏄痗ontainmentbox銆?銆佹繁鍏ョ悊瑙ine-height3.1line-height鐨勫悇绉嶅睘鎬у€糽ine-height鐨勯粯璁ゅ€兼槸normal锛屼篃鏀寔鏁板€笺€佺櫨鍒嗘瘮鍊笺€侀暱搴﹀€煎拰缁ф壙銆傝瑙佷笅琛細鍊艰鏄庢甯搁粯璁ゃ€傝缃悎鐞嗙殑琛岃窛銆俷umber璁剧疆鏁板瓧锛屽畠浼氫箻浠ュ綋鍓嶅瓧浣撳ぇ灏忔潵璁剧疆琛岄棿璺濓紝鍗硁umber鏄綋鍓峟ont-size鐨勫€嶆暟銆俵ength璁剧疆鍥哄畾鐨勮闂磋窛銆?鍩轰簬褰撳墠瀛椾綋澶у皬鐨勭櫨鍒嗘瘮琛岃窛銆俰nherit鎸囧畾line-height灞炴€х殑鍊煎簲璇ヤ粠鐖跺厓绱犵户鎵裤€傚綋浣犱娇鐢╨ine-height鏃讹紝浣犲緢灏戝皢瀹冭缃负杩欎釜鍊笺€備负浠€涔堬紵鍥犱负normal鏄竴涓拰font-family瀵嗗垏鐩稿叧鐨勫彉閲忓€笺€備緥濡傦細div{line-height:normal;font-family:'microsoftyahei';}anddiv{line-height:normal;font-family:'simsun';}杩欎袱娈典唬鐮佸湪涓嶅悓娴忚鍣ㄧ殑娴嬭瘯鏁版嵁濡備笅锛欶ontChromeFirefoxIEMicrosoftYahei1.321.3211.32SongTi1.1411.1421.141浠庝笂琛ㄥ彲浠ョ湅鍑猴紝鎸囧畾瀛椾綋鍚庯紝line-height鍦ㄤ笉鍚屾祻瑙堝櫒鐨勮В鏋愬€煎熀鏈竴鑷淬€備絾鏄紝涓嶅悓鐨勬祻瑙堝櫒浣跨敤涓嶅悓鐨勯粯璁ゅ瓧浣擄紝涓嶅悓鐨勬搷浣滅郴缁熶娇鐢ㄤ笉鍚岀殑榛樿瀛椾綋銆傛墍浠ユ垜浠湪瀹為檯寮€鍙戠殑鏃跺€欓渶瑕侀噸鏂拌缃甽ine-height銆俰nherit瀛楅潰鎰忔€濇槸缁ф壙锛屽嵆缁ф壙鐖跺厓绱犵殑line-height鐨勫€硷紝鐖跺厓绱犲灏戯紝褰撳墠鑺傜偣鐨刲ine-height銆傚鏋滃綋鍓嶈妭鐐圭殑瀛愯妭鐐规病鏈夎缃换浣昹ine-height锛屽垯瀛愯妭鐐圭殑line-height涔熸槸杩欎釜鍊笺€俵ength涔熸槸鏈夊崟浣嶇殑鍊硷紝姣斿line-height:21px鍜宭ine-height:1.5em銆傚鏋滃綋鍓峟ont-size涓?4px锛屽垯璁＄畻鍑虹殑line-height鍊间负1.5*14px=21px銆俷umber渚嬪line-height:1.5锛屾渶缁堣绠楀嚭鐨勫€间负褰撳墠font-size涔樹互鐨勫€硷紝渚嬪font-size涓?4px锛屽垯line-height璁＄畻鍑虹殑鍊间负1.5*14px=21px.%渚嬪褰撳墠font-size涓?6px锛宭ine-height涓?20%锛屽垯璁＄畻鍑虹殑琛岄珮涓?6*120%=19.2px銆備笉鐭ラ亾澶у鏈夋病鏈夋敞鎰忓埌锛宭ine-height:1.5銆乴ine-height:1.5em鍜宭ine-height:150%杩欎笁绉嶇敤娉曠殑璁＄畻缁撴灉鏄竴鏍风殑锛屾渶鍚庤绠楀嚭鏉ョ殑琛岄珮鍩轰簬瀛椾綋澶у皬銆傚畠浠彲浠ヤ簰鎹㈠悧锛熶簨瀹炰笂锛屽苟闈炲姝ゃ€傚叾瀹瀕ine-height:1.5鐨勭户鎵跨粏鑺傚拰鍙﹀涓や釜鏈変簺涓嶅悓銆傝鎴戜滑鐪嬬湅杩欎釜渚嬪瓙銆傛鏂噞瀛椾綋澶у皬锛?4px;line-height:1.5;}body{瀛椾綋澶у皬:16px;line-height:150%;}body{瀛椾綋澶у皬:14px;line-height:1.5em;}瀵逛簬
鍏冪礌鑰岃█锛屼互涓婁笁绉嶆柟寮忚绠楀嚭鏉ョ殑琛岄珮閮芥槸21px锛屼絾鏄鏋渂ody涓嬮潰鏈夊瓙鍏冪礌锛屾瘮濡傦細杩欎釜鏄爣棰?/h3>
杩欐槸鍐呭
h3,p{margin:0;}h3{font-size:32px;}p{font-size:20px;}鏈€缁堢粨鏋滀负line-height:150%鍜宭ine-height:1.5em鏈€缁堢殑琛ㄧ幇鏄袱琛屾枃瀛楅噸鍙犲湪涓€璧凤紝濡備笅鍥撅細鑰岃缃甽ine-height:1.5鐨勬渶缁堣〃鐜版槸涓よ鏂囧瓧涓嶉噸鍙狅紝鎺掔増涓嶉敊銆傛晥鏋滃涓嬪浘鎵€绀猴細璁剧疆line-height:150%鍜宭ine-height:1.5em鍚庯紝瀛愬厓绱犵户鎵胯绠楀嚭鐨勫€硷紝鍗?1px锛岃€屼笉鏄户鎵?50%鍜?.5em锛屾墍浠?h3>鍜?p>鐨勮楂樹负21px锛屽瓧浣撳ぇ灏忎负32px锛屾寜涓婅堪鍏紡璁＄畻鍑虹殑鍗婅闂磋窛涓?5.5px锛屾墍浠ヤ袱琛屾枃瀛楅噸鍙犮€備笉鍚屽睘鎬т笅line-height鐨勬渶缁堣绠楁柟寮忓姣斿涓嬨€傝缃柟娉昹ine-height璁＄畻line-height瀛愬厓绱犵户鎵縧ine-heightinherit鐖跺厓绱犵殑line-height鍊间笉闇€瑕佽绠楃埗鍏冪礌鐨刲ine-height鍊糽ength20px涓嶉渶瑕佽绠?0px%150%鑷繁鐨刦ont-size(14px)*150%=21px缁ф壙鐖跺厓绱?1px璁＄畻鍑烘潵鐨刲ine-height鍊硷紝鑰屼笉鏄甯哥殑150%濡傛灉鏄?.2鑷繁鐨刦ont-size(16px)*1.2=19.2px缁ф壙1.2,line-height=鑷繁鐨刦ont-size(32px)*1.2=38.4pxpurenumber1.5ownfont-size(14px)*1.5=21px缁ф壙1.5,line-height=ownfont-size(32px)*1.5=48px鎵€浠ワ紝鍦ㄥ疄闄呭紑鍙戜腑锛屾垜浠竴鑸缃楂樼殑鍊煎洜涓篳绾暟瀛楁槸鏈€鎺ㄨ崘鐨勬柟寮忥紝鍥犱负浼氶殢鐫€瀵瑰簲鐨刦ont-size缂╂斁锛屾帓鐗堟晥鏋滃ソ銆?.2line-height鐨勨€滃ぇ鍊肩壒鎬р€濈幇鍦紝璇蜂粩缁嗛槄璇讳互涓嬩唬鐮侊細