当前位置： 文江博客话题详情

当 1 px 边框添加到 div 时，Div 大小会增加，不想这样做

发布于 2024-09-10 15:14:16 字数 397 浏览 3 评论 0原文

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

凌乱的详细解释
实际上，我将带有 float:left （相同大小，如图标）的 DIV 添加到容器 div 中，因此所有内容都一个接一个地堆叠起来，并且当（容器 div 宽度为 300px）宽度方向上没有剩余空间时，子 DIV 就会出现在下一行，所以它像目录，但由于边框，仅选定的 DIV 大小增加，选定的 DIV 下的 DIV 转到右侧并在选定的 DIV 下方创建空白空间。

编辑：
减少选择的高度/宽度，但如何将其增加回来。使用一些第三方框架，因此当 DIV 失去选择时不会发生事件。

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（18）

兰花执着 2024-09-17 15:14:16

这在这种情况下也很有帮助。它允许您在不更改 div 宽度的情况下设置边框

textarea { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

取自 http://css-tricks.com/box-尺寸/

This is also helpful in this scenario. It allows you to set borders without changing div width

textarea { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Taken from http://css-tricks.com/box-sizing/

回复 原文
旧人九事 2024-09-17 15:14:16

如果您没有 border-radius，请将 border 更改为 outline：

outline: 1px solid black;

If you don't have a border-radius change border to outline:

outline: 1px solid black;
回复 原文
顾北清歌寒 2024-09-17 15:14:16

使用过许多这样的解决方案后，我发现使用设置 border-color:透明 的技巧是最灵活和最广泛支持的：

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

为什么它更好：

  • 不需要对元素的宽度进行硬编码
  • 出色的跨浏览器支持（仅缺少 IE6）
  • 与 outline 不同，您仍然可以分别指定例如顶部和底部边框
  • 与将边框颜色设置为背景颜色不同，您不需要如果您更改背景，请更新此内容，并且它与非纯色背景兼容。

Having used many of these solutions, I find using the trick of setting border-color: transparent to be the most flexible and widely-supported:

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

Why it's better:

  • No need to to hard-code the element's width
  • Great cross-browser support (only IE6 missed)
  • Unlike with outline, you can still specify, e.g., top and bottom borders separately
  • Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.
回复 原文
不气馁 2024-09-17 15:14:16

border css 属性将增加所有元素“外部”大小，表格中的 tds 除外。您可以直观地了解 Firebug 中的工作原理（已停止），位于html->布局选项卡。

举个例子，宽度和高度为 10 像素、边框为 1 像素的 div 的外部宽度和高度为 12 像素。

对于您的情况，要使其看起来像边框位于 div 的“内部”，在您选择的 CSS 类中，您可以将元素的宽度和高度减小两倍，或者您可以对元素填充。

例如：

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

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

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 (discontinued), 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 */
}
回复 原文
聽兲甴掵 2024-09-17 15:14:16

单击之前先在其上设置边框，使其颜色与背景相同。

然后，当您单击时，只需更改背景颜色，宽度不会更改。

set a border on it before you click to be the same color as the background.

Then when you click just change the background color and the width will not change.

回复 原文
农村范ル 2024-09-17 15:14:16

另一个好的解决方案是使用outline而不是border。它添加边框而不影响盒子模型。这适用于 IE8+、Chrome、Firefox、Opera、Safari。

（https://stackoverflow.com/a/8319190/2105930）

Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.

(https://stackoverflow.com/a/8319190/2105930)

回复 原文
浅紫色的梦幻 2024-09-17 15:14:16

我通常使用padding来解决这个问题。当边框不存在时，将添加填充；当边框返回时，将删除填充。示例：

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

enter此处的图像描述

在此处查看我的代码：https://jsfiddle.net/3t7vyebt/4/

I usually use padding to solve this issue. The padding will be added when the border is not there and removed when it is back. Example:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

enter image description here

See my code here: https://jsfiddle.net/3t7vyebt/4/

回复 原文
静若繁花 2024-09-17 15:14:16

试试这个

box-sizing: border-box;

Try this

box-sizing: border-box;
回复 原文
浅浅淡淡 2024-09-17 15:14:16

有时，您不希望高度或宽度在未明确设置的情况下受到影响。在这种情况下，我发现使用伪元素很有帮助。

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

您还可以使用伪元素做更多事情，因此这是一个非常强大的模式。

Sometimes you don't want height or width to be affected without explicitly setting either. In that case, I find it helpful to use pseudo elements.

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

You can also do a lot more with the pseudo element so this is a pretty powerful pattern.

回复 原文
§对你不离不弃 2024-09-17 15:14:16

只需将宽度和高度减少边框宽度的两倍即可

Just decrease the width and height by double of border-width

回复 原文
说不完的你爱 2024-09-17 15:14:16

您可以使用嵌入阴影做一些奇特的事情。在元素底部添加边框而不更改其大小的示例：

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}
回复 原文
那片花海 2024-09-17 15:14:16

增加边框时尝试减小边距大小

Try decreasing the margin size when you increase the border

回复 原文
末蓝 2024-09-17 15:14:16
.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}
回复 原文
此刻的回忆 2024-09-17 15:14:16

我需要能够通过添加类来“边框”任何元素，并且不影响其尺寸。对我来说一个好的解决方案是使用 box-shadow。但在某些情况下，由于其他兄弟姐妹的影响，效果并不明显。所以我结合了典型的盒子阴影和插图盒子阴影。结果是在不改变任何尺寸的情况下得到边框外观。

值以逗号分隔。这是一个简单的示例：

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

调整为您喜欢的外观，然后就可以开始了！

I needed to be able to "border" any element by adding a class and not affect its dimensions. A good solution for me was to use box-shadow. But in some cases the effect was not visible due to other siblings. So I combined both typical box-shadow as well as inset box-shadow. The result is a border look without changing any dimensions.

Values separated by comma. Here's a simple example:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

Adjust for your preferred look and you're good to go!

回复 原文
我不会写诗 2024-09-17 15:14:16

我们还可以使用 css calc() 函数

width: calc(100% - 2px);

减去 2px 作为边框

We can also use css calc() function

width: calc(100% - 2px);

subtracting 2px for borders

回复 原文
请帮我爱他 2024-09-17 15:14:16

框阴影插图

您可以尝试像这样的 ：
box-shadow:inset 0px -5px 0px 0px #fff

在元素底部添加白色 5px 边框，而不增加尺寸

You can try a box-shadow inset

something like this:
box-shadow:inset 0px -5px 0px 0px #fff

adds a white 5px border to the bottom of the element without increasing the size

回复 原文
审判长 2024-09-17 15:14:16

您可以创建具有与背景颜色相同的边框的元素，
然后当您想要显示边框时，只需更改其颜色即可。

You can create the element with border with the same color of your background,
then when you want the border to show, just change its color.

回复 原文
空心空情空意 2024-09-17 15:14:16

如果 div 的内容是动态渲染的，并且您想要设置其高度，则可以使用 outline 的简单技巧：

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

示例如下：https://codepen.io/Happysk/pen/zeQzaZ

In case content of your div is rendered dynamically and you want to set its height, you can use a simple trick with outline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

Example here: https://codepen.io/Happysk/pen/zeQzaZ

回复 原文
~没有更多了~

关于作者

多彩岁月

暂无简介

0 文章
0 评论
586 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文