Ale*_*004 2 css border margin padding
我有一个我不明白的问题.如果我在宽度上使用百分比,我希望元素计算其大小(百分比)内的边框,边距或填充.但事实上,这些值被添加到它们的大小,我认为这是错误的.我的期望是错的吗？下面的例子显示了这个问题.两个"div""左"和"右"我期望在一条线上.如果我删除"边框",它按预期工作.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
那是完全正常的.这不是你最初可能期望的,但CSS就是这样的.
即使没有百分比:
#width {
width: 100px;
padding: 0 20px;
}
这个#width div将占用140px.百分比的工作原理相同.
所以你可能需要内部div来实现你想要的.
<div class="left">
<div class="inner">
</div>
</div>
<div class="right">
<div class="inner">
</div>
</div>
.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }