css中em是相對於父元素還是目前元素的大小？ （程式碼範例）

這篇文章帶給大家的內容是關於css中em是相對於父元素還是當前元素的大小？ （程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

em是CSS中一個比較常用的相對單位，因此有必要注意一些坑點。

1em等於目前元素的字體大小，除非你在設定font-size

有很多文章說1em是等於父元素的字體大小！這種說法其實是不準確的。看以下例子：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 32px;
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>



    <div></div>

會被padding-bottom撐開，而padding-bottom的高度是64px，而不是32px！這證明了1em等於目前元素的字體大小（只有一個例外，下面會講）。 字體大小和長度有什麼關係呢？字體不是一個方塊嗎？實際上，字體大小被定義為M的寬度。

為什麼有人誤認為1em等於父元素的字體大小呢？這是因為如果在設定font-size的時候使用em單位，此時font-size還是預設值inherit，因此此時1em還等於父元素的字體大小。這是在設定font-size時才有的特例！這個特例很好理解，畢竟我正在設定當前元素的字體大小呢！怎麼能用此刻正在設定的字體大小作為單位呢！這不是悖論嗎！

舉個例子，如果這個悖論真的發生了，就會出現以下情況：水果店老闆對你說：“你想要多少斤橘子，我給你裝起來”，而你卻對老闆說： 「我要的數量是我最終要的數量的2倍」（類比於設定font-size: 2em）。這時候水果店老闆估計就要崩潰了，他到底要裝多少橘子給你呢？
為了避免這種事情發生，在你指定數量的時候如果使用相對單位，那麼這個單位必定不能相對於你此刻所指定的數量。你可以對老闆這樣說：「我要的數量是上一個顧客買的2倍」（類比於設定font-size: 2em）。當你買完橘子以後，又可以對老闆這樣說：「我還要一些蘋果，數量是剛才買的橘子的2倍」（類比於設定padding-bottom: 2em）。

除了這個特例以外，當設定其他css屬性的時候，1em就等於目前元素的字體大小。

在上面的例子中，設定font-size的時候使用em，就能證明這個特例的存在：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 2em;  /* 仅仅这一行改变了！ */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>


    <div></div>

最終高度依然是64px，因為在設定font-size的時候，1em == 16px；在設定padding-bottom的時候，1em 就等於32px 了。

如果在根元素上的font-size使用em會怎麼樣呢？它沒有父元素了啊！沒關係，對於inherited properties（其中就包含font-size），在根元素上的預設值為initial，對於大部分瀏覽器，font-size的initial值就是16px。因此在設定根元素上的font-size時，它的值還是16px，1em也等於16px

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        html {
            /* 2*16px=32px */
            font-size: 2em;
        }
        div {
            /* 2*32px=64px */
            font-size: 2em;
            /* 2*64px=128px */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>



    <div></div>

以上是css中em是相對於父元素還是目前元素的大小？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！