缩小带有内边距或外边距的div

Question

缩小带有内边距或外边距的div

htmlcss

4

我需要做的是：

有一个固定高度的div，比如说是100px。

我想在这个100px的div内部放置一个高度为100％的div，但顶部和底部都要缩短10px。

因此，结果将是一个包装div，高度为100px，在此包装div内另有一个div，从顶部开始向下10px并且距底部10px结束（即height:80px）。

问题在于，我得到了一个总高度为120px的div。

请注意：只能使用HTML和CSS解决方案。

注2：包装器内部的div具有100％的高度。

#t{
  height:100px;
  width:5px;
  background: blue;
}

#e{
  height:100%;
  width: 5px;
  padding-top:10px;
  padding-bottom: 10px;
  background: yellow;
}

#s{
  height:100%;
  width: 5px;
  background: gray;
}

<div id="t">
  <div id="e">
    <div id="s">
    </div>
  </div>
</div>

这是我一直在使用的JSfiddle http://jsfiddle.net/MWUsM/2/

这个JSfiddle涉及到it技术，可以让你更好地了解和学习相关技术。请点击链接查看具体内容。

- Rick Hoving

еҪ“жӮЁе°ҶеҶ…йғЁdivзҡ„position:absolute; top:10px; bottom:10px;иҖҢдёҚжҳҜheight:100%ж—¶пјҢе®ғеә”иҜҘеҸҜд»Ҙе·ҘдҪңгҖӮ - Sven Bieder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jacktheripper · Accepted Answer

你正在寻找CSS的box-sizing属性border-box

盒子模型指定元素的渲染宽度/高度为指定的宽度/高度 + 填充 + 边框(border)，为从这个总和中减去填充和边框属性，CSS3规范添加了box-sizing

更新的示例

Chris Coyier撰写了一篇详细的文章

为了跨浏览器支持，建议按以下方式添加前缀:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;