我当然是初学者,但在发布之前我也进行了大量的搜索.我的div元素周围似乎有额外的空间.我还想指出我尝试了很多边框组合:0,填充:0等等,似乎没有任何东西摆脱白色空间.
这是代码:
<html>
<head>
<style type="text/css">
#header_div {
background: #0A62AA;
height: 64px;
min-width: 500px;
}
#vipcentral_logo { float:left; margin: 0 0 0 0; }
#intel_logo { float:right; margin: 0 0 0 0; }
</style>
</head>
<body>
<div id="header_div">
<img src="header_logo.png" id="vipcentral_logo">
<img src="intel_logo.png" id="intel_logo"/>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
这就是它的样子(我插入红色箭头以明确地调出额外的空间):

我期待蓝色直接与浏览器边缘和工具栏相邻.这些图像都是64像素高,并且具有与分配给#header_div的图像相同的背景颜色.任何信息将不胜感激.
所以首先要设置一些场景:
HTML
<div id="container">
<div id="inner">test</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
#container {
width:300px;
height:150px;
background-color:#d7ebff;
}
#inner {
width:100%;
height:100%;
padding:5px;
background-color:#4c0015;
opacity:.3;
}
Run Code Online (Sandbox Code Playgroud)
这将在所有现代浏览器中产生类似于此的东西:

现在我知道这是符合标准的行为(正如我之前所知,但在本文中再次确认,我也知道如果我在内部CSS声明中包含此代码:
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
Run Code Online (Sandbox Code Playgroud)
...它将采用"边框"模型并获得对我来说更直观的行为,但我发现自己试图在逻辑上证明为什么这就是它的原因并且我无法做到.
看起来(在事物的表面上)对于我来说更合乎逻辑的是内盒总是将容器填充到容器宽度的正好100%,而不管内盒的填充或边框.当我试图将textarea的宽度设置为100%具有边框或类似4px内部填充的东西时,我一直遇到这个问题... textarea将始终溢出容器.
所以我的问题是......在设置宽度时,设置默认行为以忽略元素的边框和填充的原理是什么?