Html 填充导致水平滚动-它增加了宽度_Html_Css_Width_Padding

Html 填充导致水平滚动-它增加了宽度

html css

Html 填充导致水平滚动-它增加了宽度,html,css,width,padding,Html,Css,Width,Padding,请看下面的代码： <html> <head> <style type="text/css"> html, body{ width:100%; height:100%; margin:0px; } #header{ width:100%; height:100px; position:fixed; display:inline-block; background-color:red; padding:0 10px 10px 10px; } </style

请看下面的代码：

<html>
<head>
<style type="text/css">
html, body{
width:100%;
height:100%;
margin:0px;
}

#header{
width:100%;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}
</style>
</head>
<body>
    <div id="header">
         <div id="header-container">
         </div>
    </div>
</body>
</html>

#header{
width: initial;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}


html，正文{
宽度：100%；
身高：100%；
边际：0px；
}
#标题{
宽度：100%；
高度：100px；
位置：固定；
显示：内联块；
背景色：红色；
填充：0 10px 10px 10px；
}

这是你的电话号码。

标题

必须具有100%的宽度，从左、右和底部填充10px。请看这张照片

这是firebug的

#header

的布局。正如您所看到的，图像中没有右填充，因为10px填充被添加到

#标题

宽度中（您可以测试它）。如何在不增加宽度的情况下为

#页眉设置100%宽度以及为左、右和底部设置10px填充？
尝试使用边距。。或者缩小相对于填充区域的宽度
#header{
    width:98%;
    height:100px;
    position:fixed;
    display:inline-block;
    background-color:red;
    margin:0 1% 10px 1%;
}

填充
填充清除元素内容（边框内）周围的区域。填充受元素背景色的影响
保证金
边距清除图元周围的区域（在边框之外）。边距没有背景色，完全透明。
试试这个
 * , *:before, *:after{ 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     -ms-box-sizing:border-box;
   }

或
看起来你想要全宽的填充物。为此，您可以尝试以下代码：
<html>
<head>
<style type="text/css">
html, body{
width:100%;
height:100%;
margin:0px;
}

#header{
width:100%;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}
</style>
</head>
<body>
    <div id="header">
         <div id="header-container">
         </div>
    </div>
</body>
</html>

#header{
width: initial;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}

我只希望这将提供desire输出。
CSS calc操作符可能会有所帮助。使用它，您可以调整宽度，当您指定左/右填充或左/右边距时，宽度可能会被“忽略”。因为您指定了总左/右填充为20px，所以需要从总填充中减去20px
#header{
width: calc(100% - 20px);
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}

这将解决您的问题overflow-x:hidden
谢谢您的回复，那么标题
和标题容器
的宽度必须是多少？对于遇到这种情况的人来说，作为一个提示，现在似乎几乎所有浏览器都支持主框大小：边框框；版本，因此大多数用户可能不需要-mox-、-webkit-和-ms-前缀。无论如何，我认为它们仍然有助于最大限度地提高兼容性。