鍍金池/ 問答/HTML/ 一個(gè)簡單的兩欄布局下，為另一欄預(yù)留的width需要比實(shí)際寬度大的問題

一個(gè)簡單的兩欄布局下，為另一欄預(yù)留的width需要比實(shí)際寬度大的問題

html結(jié)構(gòu)：

<div id="left"></div>
<div id="right"></div>

css代碼：

* {
    box-sizing: border-box;
}
#left, #right {
    display: inline-block;
    vertical-align: top;
}
#left {
    width: calc(100% - 205px); 
    /* don't know why additional 5px? */
}
#right {
    width: 200px;
}

demo：https://codepen.io/anon/pen/N...

一個(gè)簡單的兩欄布局，使用calc()動(dòng)態(tài)計(jì)算左邊欄的width來為右邊欄預(yù)留空間。

按照我的理解，#right是200px，中間沒有其他內(nèi)容，左欄width應(yīng)該calc(100% - 200px)就足夠了，但是實(shí)際測試發(fā)現(xiàn)，右欄會(huì)被擠到下一行，而至少需要calc(100% - 205px)才能保證兩欄在同一水平線，多出來的5px在哪里被占據(jù)了？

在chrome、IE11測試均如此

回答
編輯回答
神經(jīng)質(zhì)

塊級(jí)元素都是有內(nèi)外邊距的。如果你不手動(dòng)調(diào)沒。他就會(huì)存在。

就像樓上寫的那樣調(diào)沒就好了。

也可以引用一下初始化css,minireset.css

2017年1月10日 21:03
編輯回答
撿肥皂
<style>
    body{
        font-size: 0px;
    }
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    #left, #right {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
    }
    #left {
        width: calc(100% - 200px);
        /* don't know why additional 5px? */
    }
    #right {
        width: 200px;
    }
</style>
</head>
<body>
    <div id="left">1</div>
    <div id="right">2</div>
</body>
2017年5月25日 07:40