当1个px边框被添加到div时，Div大小增加，不想这样做 [英] When 1 px border is added to div, Div size increases, Don't want to do that

问题描述

单击我将1px边框添加到div，以便Div尺寸增加2px X 2px。
我不想让div大小增加。是否有任何简单的方法可以做到这一点？

凌乱详细解释

其实我添加了DIV与浮动：左（相同的大小，像图标）到一个容器div，所以所有堆叠起来一个接一个，当（容器div宽度是300px）没有空间左宽度明智的孩子DIVs进来，所以其类似的目录，但由于边界只有选定的DIV大小得到增加，所选DIV下的DIV向右移动并在选定的DIV下创建空白空间。

编辑：

选择时降低高度/宽度，但是如何增加高度/宽度。使用一些第三方框架，所以当DIV失去选择时没有事件。 解决方案

边界CSS属性将增加所有元素外部大小，除了表中的tds。您可以通过html-> layout标签了解Firebug的工作原理。

仅举一例，一个宽度和高度为10px的div和一个1px的边框，将有一个12px的外部宽度和高度。

对于您的情况，为使其看起来像边框位于内部 div，在你选择的CSS类中，你可以减少元素的宽度和高度，加倍你的边框尺寸，或者你可以对元素padding做同样的操作。

例如：

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

On click I am adding, 1px border to div, so Div size increases by 2px X 2px. I dont want to get div size increased. Is there any simple way to do so?

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.

EDIT:
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..

解决方案

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.

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.

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.

Eg:

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

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

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