使用框尺寸添加边框时防止高度更改 [英] Preventing a height change when adding a border with box-sizing

问题描述

我无法找到描述此问题的内容，但如果我错过了它，请告诉我。

下面是一个演示（Tested in IE11和Chrome），它完美地显示了这个问题。

基本上，我试图给一个元素添加一个边框，并保持大小相同。它的宽度是完美的，但高度只能容纳一半，所以我有一个3px的高度。

有没有办法阻止这种/绕过它而不使用脚本？我可以专门对具有边框的元素进行更改，但我不知道实际高度（此处仅使用200px仅用于演示目的，因此简单地减小高度不是一个选项。

谢谢。

编辑（由于显然我不清楚我在问什么）

有没有一种方法可以防止在不使用脚本的情况下更改高度？

DEMO：

解决方案

如果存在，您可以设置添加 line-height：0px 没有文本 .div 作为图像是 inline-block 元素它添加空格

  div {width：200px;向左飘浮; margin-right：3px;} div img {max-width：100％; max-height：100％;}。div {border：3px dotted blue;盒子尺寸：边框; line-height：0px;}  

< div id = DIV1 > < img src =http://placehold.it/200x200alt =/>< / div>< div class =div> < img src =http://placehold.it/200x200alt =/>< / div>< div class =divstyle =clear：left> < img src =http://placehold.it/200x200alt =/>< / div>

I'm unable to find something that describes this issue, but if I'm missing it, just let me know.

Below is a demo (Tested in IE11 and Chrome) which shows the problem perfectly

Essentially, I'm trying to add a border to an element, and keep the size the same. It's working perfectly for the width, but the height, it only accommodates half of it, so I have an extra 3px in height.

Is there a way to prevent this / get around it without using a script? I can make changes specifically to the element(s) which have the border, but I don't know the actual height (200px is used here just for demo purposes, so simply reducing the height isn't an option.

Thanks.

EDIT (Since apparently it's unclear what I'm asking)

Is there a way to prevent the height changing without using a script?

DEMO:

div {
  width: 200px;
  float: left;
  margin-right: 3px;
}
div img {
  max-width: 100%;
  max-height: 100%;
}
.div {
  border: 3px dotted blue;
  box-sizing: border-box;
}

<div id="div1">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div" style="clear:left">
  <img src="http://placehold.it/200x200" alt="" />
</div>

解决方案

You can set add line-height:0px if there is no text for .div as image is inline-block element it add whitespace

div {
  width: 200px;
  float: left;
  margin-right: 3px;
}
div img {
  max-width: 100%;
  max-height: 100%;
}
.div {
  border: 3px dotted blue;
  box-sizing: border-box;
  line-height:0px;
}

<div id="div1">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div" style="clear:left">
  <img src="http://placehold.it/200x200" alt="" />
</div>

这篇关于使用框尺寸添加边框时防止高度更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！