The difference of the line-height:2 and line-height:2em

時間 2019-12-06

標籤 difference line height 2em 欄目 CSS 简体版

原文原文鏈接

The difference of the line-height:2 and line-height:2em

When I make up the www.apple.com/apple-pay/offers/, I need to make a box for "優惠名額已滿，感謝再次惠顧", and i need to set up the line-height for the fontcss

So what's the difference about the two css

Line-height:2 is based on the font what is the only themself
Line-height:2em is based on the font father element

we can see the difference from the code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>The difference about the two line-height</title> <style type="text/css"> div { width: 300px; border: 1px solid red; } body div p{ font-size: 14px; } .first { line-height: 2; } .second { line-height: 2em; } span { font-size: 40px; } </style> </head> <body> <div class="first"><p>普通文字普通文字普通文字普通文字普通文字普通文字普通文字普通文字普通文字普通文字<span>優惠結束</span>普通文字普通文字普通文字普通文字普通文字普通文字</p></div> <div class="second"><p>普通文字普通文字普通文字普通文字普通文字普通文字普通文字普通文字普通文字普通文字<span>優惠結束</span>普通文字普通文字普通文字普通文字普通文字普通文字</p></div> </body> </html>
html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。