当1像素边框添加到div，Div大小增加，不要这样做 [英] When 1 px border is added to div, Div size increases, Dont want to do that

问题描述

点击我添加，1px边框到div，因此Div尺寸增加2px X 2px。
我不想得到div大小增加。有什么简单的方法吗？

详细说明

其实我添加了DIV与float：left（相同的大小，像图标）到一个container-div，所以所有的堆叠一个接一个，当（container-div的宽度是300px）没有空间左宽度，所以孩子DIVs在下一行，所以它就像目录，但是因为边框只选择DIV大小增加，DIV在选择的DIV下右移并在选定的DIV下面创建空白空间。

Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.

干杯，

编辑：

/宽度选择，但如何增加回来。使用一些第三方框架，所以没有事件，当DIV失去选择..

Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..

推荐答案

border css属性将增加所有元素外部大小，除了表中的tds。

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug, under the html->layout tab.

作为一个例子，一个宽度和高度为10px的div是一个可以在Firebug中工作的视觉效果。和1px的边框将具有12px的外部宽度和高度。

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

对于你的情况，使它看起来像边框是在内部 div，在你选择的CSS类中，你可以减少元素的宽度和高度两倍边框大小，或者你可以做相同的元素填充。

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

例如：

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

这篇关于当1像素边框添加到div，Div大小增加，不要这样做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！