ホームページ >ウェブフロントエンド >htmlチュートリアル >line-height:150% と line-height:1.5_html/css_WEB-ITnose の違い
line-height:150% と line-height:1.5_html/css_WEB-ITnose の違い
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:33:501114ブラウズ
line-height:150% と line-height:1.5 の違い
"%": 親要素から継承される距離です。
"単位なし": それぞれの行の距離の計算です。子要素
例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font-size:14px; line-height:150%; background: black; } p{ font-size:26px; background: gray; color: white; } </style></head><body> <p>你好！</p></body></html>
効果は図に示すとおりです:
1. line-height:XX% の場合:
body{font-size:14px;line- height:150%;}
p{ font-size:26px;}
結果は次のようになります:
body{line-height:21px;}//14*150%=21
p{line-heigt: 21px;}//親要素を継承します
例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font-size:14px; line-height:1.5; background: black; } p{ font-size:26px; background: gray; color: white; } </style></head><body> <p>你好！</p></body></html>
効果は次のとおりです:
2. -高さ:X.X:
体{フォント-size:14p x;line-height:1.5;}
p{font-size:26px;}
結果は次のようになります:
body{line-height:21px;}//14*1.5=21
p{line-height:39px;}//26*1.5= 39
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。