问题标签 [border-box]

我试图解决这个问题几个小时......我尝试了一些技巧，一些小技巧，我还尝试添加位置“相对，绝对......等”，一些“顶部”，顶部添加一个不可见的不固定 div固定的和其他的，但我想要最干净的解决方案，并知道为什么我会遇到这个问题。

：我有一个“固定”到顶部的菜单和一个标题。标题在菜单后面（正常），但问题是当我给标题添加边距时，它会在正文中添加边距，而我想在标题内部添加边距，只需将标题放在下面没有位置的菜单：相对+顶部：Xpx。并且使用“box-sizing:border-box”不会改变任何东西

http://jsfiddle.net/WdNz4/

（不能发布我的css，小bug，去jsfiddle）

提前感谢您的帮助！

I did not find any answer for my question, even if it is really simple. I am using the CSS proprety box-sizing to do an "inside border" for a div (which is actually a <a>...</a>)

But it seams that it is not working at all as the border is the same without border-box properties. Anyone has an answer?

Just to be sure of what I am doing. What I want is to get a <a> an "inside border". I obviously know the border: ...; property but it is making the element bigger and I don't want that. I would like to have something like border: -2px solid #3498db.

[EDIT] I found a solution. Description on the comments.

我正在尝试使用边框框来创建在 3 列图像周围具有黑色 50% 透明度边框的效果。我已经读过，为了使边框向内移动以使用填充，但我无法让它工作。

这是我的 CSS 代码：

这就是结果

我想要的是边框向内，这将使图片透过边框。

这是一个例子：

我尝试按照本教程中的示例进行操作：CSS Tricks: Transparent Borders with background-clip，但失败了。

请帮忙，我不知道该怎么办~

编辑：这是该网站的实时版本

我有以下 HTML/CSS：

真正奇怪的是，当您将鼠标悬停在一个 div 上时，边框大小的变化会导致该 div 内的文本被下推，其他 div 也被下推。

但是，如果您从 div 中删除文本（即“1”、“2”、“3”和“4”），则不会出现问题。

为什么 div 中的文本会导致布局中断？

谢谢你。

我一直在阅读一些较旧的资源，这些资源在max-width与. 有没有其他人结合并有任何问题？min-widthbox-sizing: border-boxmax/min-widthbox-sizing: border-box

我计划* {box-sizing: border-box}为所有元素建立一个全局设置的站点，但还需要使用 max-width 但如果它会导致问题，我不想这样做。

我在 Firefox 中遇到了一个奇怪的问题，看起来调试控制台在骗我，或者我遗漏了一些东西。

这是body标签的CSS：

我正在使用属性“box-sizing”，所以最大宽度应该是 1200px，里面有填充。正如调试控制台所说（在右下角），内容区域的宽度应该是 898px 但如果我测量它，这就是我真正得到的：

我对 box-sizing:border-box 属性有误解吗？

感谢你们 ！

编辑：我在这里用一个简化的案例做了一个 jsfiddle 。

看下图，你会发现 html、inspector 给出的盒子模型、渲染和我在 Photoshop 上添加的一个红色方块（实际上是 150x150px）。我不明白，检查员说盒子是150x150但它是错误的......

我试图在谷歌和这个网站上搜索这个问题的答案。

我有一个需要做出响应的网站。它相对复杂，但对于我们目前的设计来说绝对是可能的。

我的问题是这个。是否有响应式网格系统，或者不依赖于 box-sizing 的完全响应式网格系统的示例：border-box。在查看 Pure & Bootstrap 之后，似乎两者都依赖该属性来使其工作。

在实践中考虑它时，在我看来，需要一个 box-sizing:border-box 模型来允许适当地使用百分比。

为什么我无法使用此方法？此项目绝对需要对 IE7 的支持。我知道有可以用来强制支持的 polyfill 和 htc 文件，但是，该站点的规模和大小使得这些选项难以实施。从我读到的内容来看，这些选项应该适度使用，而这种口径的网站，就是不能适度使用。

谢谢。

亲爱的 stackoverflow 用户，

我有一个包含图像的 div（由 php 在 wordpress 中生成）。根据父 div 大小，此图像将是 100% 宽度和自动高度。

我想应用一个覆盖该图像顶部和底部的边框图像。这可以通过 box-sizing:border-box 来完成。所以我做了。

但是由于某种原因，边框不会覆盖图像，并且图像的高度尺寸会减小，或者父级会增加其高度尺寸。

我被困在这个问题上很久了。无论如何，这只能用css来完成吗？

jsfiddle：http: //jsfiddle.net/SE3Na/

HTML

CSS

Can i make two buttons with 1em padding - one with a background color and other with a border, to have the same height? Basically to have the border inside of the div.

Tried to use box-sizing: border-box; method, but that didnt solve my problem.

Html:

CSS:

Can't wrap my head around it, seemed like a logical solution. Thanks in advance.

我从来没有遇到过这个问题，但简而言之，我将边框框作为我的框大小应用于所有元素：

我有一个响应式列布局，在这种情况下每行 3 列

在我向 .property div 添加边距之前，所有内容都很好地跨越了 3 列，现在通常是因为边框框，这只会在列之间添加边距并将它们连续保留 3 列，但现在由于某种原因，第 3 列被推送到新的列行，老实说，我不明白为什么，我错过了什么吗？

这是关于 jsFiddle 的实时示例：http: //jsfiddle.net/NmrZZ/