负边距问题和神秘的4px差异 [英] Negative Left Margin issue and Mysterious 4px difference

问题描述

我挠了很长时间，终于决定寻求帮助.实际上，我有一个带有两个输入(字段+按钮)的简单表单，我想在将表单包装为正确的文本字段+填充宽度时将按钮移到字段上.

I am scratching my head for quite a long time and finally decided to ask for help. Actually I have a simple form with two inputs (field + button) and I want to bring button over field while wrapping the form to correct width of text field + padding.

我正在使用 左边距:-31px 按钮，宽度设置为27px.

I am using margin-left: -31px on button which is set width of 27px.

您可以在 http://jsfiddle.net/UfK6K/上进行尝试. 并显示

You can try it at http://jsfiddle.net/UfK6K/ and it appears

但是当我将margin-left设置为-32px时，它会破坏布局. http://jsfiddle.net/UfK6K/1/并显示

BUT when I set margin-left: -32px it breaks the layout. http://jsfiddle.net/UfK6K/1/ and appears

现在，如果我将按钮的宽度更改为任意数字，并且只要将左边距保持在负4像素差之内，它就会起作用，但是当它增加时(如-32像素的情况下，它会中断).

Now if I change width of button to any figure and as long I keep margin-left within negative 4px difference it works but when it increases like in case of -32px it breaks.

我想了解4px的差异从何而来? 当然，我该如何在文本字段的左侧再移一些按钮?

I want to understand from where difference of 4px comes into play? And Of course how I can move button bit more left over text field?

*它在Opera以外的所有浏览器中都无法使用.

*It breaks in all browsers except Opera.

推荐答案

这是一个非常棘手的问题，即4px来自何处.我会尽力回答.

Well its a very tricky question that from where 4px comes from. I'll try to answer it.

当任何元素设置为inline-block时，将在该元素的右侧放置4px.实际上，它是空白"所需要的大小，是的，实际上它是空白.

When any element is set display to inline-block then 4px are found to be placed at right side of this element. Actually its the size a 'white space' takes, yes its actually a white space.

您可以认为它是因为内联块元素由空格隔开，通常需要4px，因为在Opera中它需要更多(尽管不确定最新版本，因为不同的字体会以不同的宽度显示空格)在不同的浏览器中，唯一使跨浏览器和字体大小具有一致的空白宽度的字体是Courier New.它是一种固定宽度的字体，空白是0.63em宽.)但是你明白了吗?

You can think of it as that inline-block element are separated by a white space and it usually takes 4px because in Opera it takes bit more (not sure about latest version though -- because different fonts render whitespace with different widths in different browsers the only font that renders a consistent white-space width across browsers and font sizes is Courier New. it is a fixed width font, and it’s whitespace is 0.63em wide.). But you get the point?

现在有各种各样的解决方法，例如float:left，甚至设置了包含内联被阻止元素的父元素的负4px字母间距.

Now there are various work around like float:left or even setting negative 4px letter spacing of parent element which contains inline blocked elements.

您也可以尝试使用font-size:0;

You can also try font-size: 0;

在您的特定情况下，职位是:绝对；似乎是最好的选择.

And in your particular case position:absolute; seems to be best option.

这篇关于负边距问题和神秘的4px差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！