关于css边框，边距，填充和宽度 [英] About css border, margin, padding and width

问题描述

使用CSS边框，边距，填充和宽度我遇到一个额外的像素...

我知道一个元素的总宽度和高度是

如果你看这个 http://jsfiddle.net/Fs8HQ/ ，一切似乎工作。

现在让我们在 http://jsfiddle.net/Fs8HQ/1/ （从宽度和高度中删除：活动）：在Firefox和Chrome中是一个额外高度和一个超宽像素，移动所有相邻的元素。在Opera中有一个超宽和两个超高像素。他们来自哪里？

但这里 http：// jsfiddle。 net / hJTpY / 将像素从边框移动到边框似乎修复了一切，但伪动画是不一样的。

在第一个两个fiddles边界减少接近内容;在最后一个边界被扩展的内容减少。

为什么会发生？我错过了什么？

解决方案

这是我最近注意到的问题：

$ b b

如果声明了一个正确的doctype（与Microsoft boxmodel相矛盾，那么可以通过使用quirks-mode触发），W3C引入的默认boxmodel是 content-box 然而，最近我注意到，浏览器有UA样式声明 box-sizing：border-box （仅适用于输入元素？）。这就是为什么你的诡计不工作，因为边界被考虑到宽度。要解决这个问题，你必须声明 box-sizing：content-box 。请参见此问题处理同样的问题。

Playing with css border, margin, padding and width I came across an extra pixel...

I know that the total width and height of an element is the sum of its width, border, margin and padding.

If you look at this http://jsfiddle.net/Fs8HQ/ , everything seems to work. When you click the button, moving some pixels from the border to the margin create a pseudo-animation.

Now let's set a fixed width and height in http://jsfiddle.net/Fs8HQ/1/ (remove width and height from :active): in Firefox and Chrome there is one extra-height and one extra-width pixels that move all the adjacent elements. in Opera there is one extra-width and two extra-height pixels. Where they come from?

But here http://jsfiddle.net/hJTpY/ moving the pixel from the border to the padding seems to fix everything, but the pseudo-animation is not the same.

In the first two fiddles the borders are reduced approaching to content; in the last one the borders are reduced by the contents that expands.

Why does that happen? I'm missing something?

解决方案

This is a problem I noticed lately:

The default boxmodel introduced by the W3C is content-box if a proper doctype is declared (in contradiction to the Microsoft boxmodel which can be triggered by using quirks-mode in IEs).

However, lately I noticed that the browsers have UA-styles which declare box-sizing:border-box (for input-elements only?). That is why your trick does not work, because the border is accounted into the width. To fix this, you have to declare box-sizing:content-box. See this question dealing with the same problem.

这篇关于关于css边框，边距，填充和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！