html - CSS 填充将右对齐对象推出页面

Question

我正在为我的网站制作导航栏。我有一个 div，我想在其中包含 Logo ，并且与最右侧对齐的是一个下载按钮。我使用 CSS 属性“justify-content”和“space- Between”将按钮向右对齐。但是，当我向 div 左侧添加填充时，按钮会被推出页面。

这是我的代码:

  body, html {
            margin: 0;
            background-color: #000000;
        }
        #header {
            padding-top: 10px;
            padding-bottom: 10px;
            height: 30px;
            position: fixed;
            background-color: rgb(10, 98, 160, .5);
            width: 100%;
            border-bottom: 1px solid #808080;
            display: flex;
            justify-content: space-between;
            padding-left: 20px;
        }

    <div id="header">
        <img src="titanium_tsp.png" height="100%">
        <button>Download</button>
    </div>

Answer 1

你说标题是宽度的100%，但是使用content-box默认的box-sizing，这意味着标题的内容是100宽度的%，忽略填充。更改 box-sizing到 border-box 以便同时考虑填充:

#header {
    box-sizing: border-box;
    . . .
}