表格按钮边距 [英] form button margin
问题描述
嗨。
我在表单按钮中使用背景图片。我所有的问题是，所有
方面的按钮内部都有1个像素的边距。
我会喜欢我的背景图像来填充按钮的内部从按钮边框到按钮边框，而不是停止1像素的那个。
我试过了：
margin-top：0;保证金左：0;余量右：0; margin-bottom：0;
这没什么。
另外：
margin-top：-1 ;保证金左：-1;保证金右：-1; margin-bottom：-1;
这确实摆脱了保证金，但它也摆脱了按钮
边界。
这就是我正在使用它并且它主要起作用......唯一的问题是按钮内的1
像素缓冲区：
..fbutton1 {
text-align：middle; vertical-align：top;
font-family：Arial，Verdana;字体大小：11像素; font-weight：bold;
颜色：＃000000;
background-image：url（../ images / button_fill1.jpg）;
border-top：＃EFF4F9;边框底部：＃62707D; border-left：＃EFF4F9;
border-right：＃62707D;
border-top-width：1px;左边框宽度：1px的; border-right-width：1px;
border-bottom-width：1px;
border-style：solid;
padding-top： 0像素;填充左：0像素; padding-right：0px;
padding-bottom：0px;
margin-top：0;保证金左：0;余量右：0; margin-bottom：0;
}
谢谢。
Hi.
I am using a background image in a form button. The problem I am
having is that there is a 1 pixel margin inside the button on all
sides.
I would like my background image to fill the inside of the button from
button border to button border, and not stop 1 pixel shy of that.
I have tried:
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;
This does nothing.
Also:
margin-top:-1; margin-left:-1; margin-right:-1; margin-bottom:-1;
This does get rid of the margin, but it also gets rid of the button
border.
This is what I''m using and it mostly works...the only problem is the 1
pixel buffer inside the button:
..fbutton1 {
text-align:middle; vertical-align:top;
font-family:Arial,Verdana; font-size:11px; font-weight:bold;
color:#000000;
background-image: url(../images/button_fill1.jpg);
border-top:#EFF4F9; border-bottom:#62707D; border-left:#EFF4F9;
border-right:#62707D;
border-top-width:1px; border-left-width:1px; border-right-width:1px;
border-bottom-width:1px;
border-style:solid;
padding-top:0px; padding-left:0px; padding-right:0px;
padding-bottom:0px;
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;
}
Thanks.
推荐答案
moocow写道：
moocow wrote:
我在表单按钮中使用背景图像。我所面临的问题是所有
侧面的按钮内都有1个像素的边距。
如果空间在边框内，那么它就是你看到的填充物。
我希望我的背景图像填充内部从
按钮边框到按钮边框的按钮，并没有停止1像素害羞。
..fbutton1 {
填充：0;
}
应该工作。这可能是一个浏览器问题。在任何情况下，_as always_，我们
需要一个网址来帮助你。
这就是我正在使用的
$ b $哇哇！你那里有很多代码。你确定要
更改窗体小部件的外观吗？对于
可用性可能不好。如果你这样做，至少考虑简化一下，并纠正设计中你应该知道的错误，如果你在ciwas潜伏了一段时间的话，你应该知道这些错误。
font-family：Arial，Verdana;字体大小：11像素;
不！不要在px中设置字体大小！
font-weight：bold;
颜色：＃000000;
如果设置颜色，也可以设置背景颜色。
border-top：＃EFF4F9;边框底部：＃62707D; border-left：＃EFF4F9;
border-right：＃62707D;
border-top-color：＃EFF4FF9; / *等* /
border-top-width：1px;左边框宽度：1px的; border-right-width：1px;
border-bottom-width：1px;
/ *简化* /
border-width：1px;
padding-top：0px;填充左：0像素; padding-right：0px;
padding-bottom：0px;
/ *简化* /
填充：0;
margin-top：0;保证金左：0;余量右：0; margin-bottom：0;
I am using a background image in a form button. The problem I am
having is that there is a 1 pixel margin inside the button on all
sides.
If the space is inside the border, then it''s padding you''re seeing.
I would like my background image to fill the inside of the button from
button border to button border, and not stop 1 pixel shy of that.
..fbutton1 {
padding: 0;
}
should work. It may be a browser issue. In any case, _as always_, we
need a url to help you.
This is what I''m using
Whoa! You got a whole lotta code there. Are you sure you want to
change the appearance of a form widget that much? Might be bad for
usability. If you do, at least consider simplifying a bit, and correct
the mistakes in design that you should have known about if you lurked
in ciwas for some time.
font-family:Arial,Verdana; font-size:11px;
No! Don''t set font-size in px!
font-weight:bold;
color:#000000;
If you set a color, then set a background color, too.
border-top:#EFF4F9; border-bottom:#62707D; border-left:#EFF4F9;
border-right:#62707D;
border-top-color: #EFF4FF9; /* etc. */
border-top-width:1px; border-left-width:1px; border-right-width:1px;
border-bottom-width:1px;
/* simplify */
border-width: 1px;
padding-top:0px; padding-left:0px; padding-right:0px;
padding-bottom:0px;
/* simplify */
padding: 0;
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;
/ *简化* /
保证金：0;
-
Brian（删除.invalid给我发电子邮件）
http://www.tsmchughs.com/
2004年7月7日星期三18:00:45 -0400，Brian
< us ***** @ julietremblay.com.invalid>写道：
On Wed, 07 Jul 2004 18:00:45 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:
。fbutton1 {
padding：0;
}
是的，它是填充的似乎不想离开。我已经尝试了你的建议
并且还没有运气形成{padding：0}。
应该有效。这可能是一个浏览器问题。无论如何，_as always_，我们需要一个网址来帮助你。
浏览器是最新的6.x IE浏览器。我不能发布网址，但是如果你认为你可以提供帮助，我可以通过电子邮件向你发送一个HTML和CSS文件。
你确定要的吗？改变表单小部件的外观
那么多？
是的，我绝对是正面的。我试图让forrm按钮
看起来像网站上的所有其他非表格按钮。没有借助图像
.fbutton1 {
padding: 0;
}
Yes, it''s padding that doesn''t seem to want to go away. I have tried
your suggesstion and also form {padding:0} with no luck.
should work. It may be a browser issue. In any case, _as always_, we
need a url to help you.
The browser is the latest 6.x IE. I can''t post the URL, but if you
think you can help, I can email you the one HTML and CSS file.
Are you sure you want to change the appearance of a form widget
that much?
Yes, I am absolutely positive. I am trying to get the forrm buttons to
look like all the other non-form buttons on the site. With out
resorting to images
如果你这样做，至少考虑简化一下，并纠正
If you do, at least consider simplifying a bit, and correct
设计中的错误你应该知道如果你潜伏在ciwas一段时间。
the mistakes in design that you should have known about if you lurked
in ciwas for some time.
我刚刚到了！
哇！
正确的语法你建议我应该做的改变。
指定左，右，上，下边距
单独而不仅仅是保证金：0是故意做的
，因为这是一个皮肤，我让用户更容易
来定制设置。
不！不要在px中设置字体大小！
I''ve only just arrived!
Whoa!
The "proper syntax" changes you suggested I should do.
Things like specifying the left, right, top and bottom margins
individually instead of just margin:0 was done intentionally
because this is a "skin", and I am making it easier for users
to customize the settings.
No! Don''t set font-size in px!
为什么不呢？！？好的，请改为......
感谢您的投入！我会做那些语法修正。现在
如果我可以摆脱填充。
-me-
Why not?!? Ok, pt instead...
Thanks for your input! I''ll make those syntax correction. Now
if I can just get rid of the padding.
-me-
嗯。我找到了答案。
奇怪的是，用这个：
background：url（../ images / button_fill1.jpg）;
而不是：
background-image：url（../ images / button_fill1.jpg）;
消除按钮内部的1像素填充。我是
不知道为什么会这样。
-me-
Hmm. I found the answer.
Oddly enough, using this:
background:url(../images/button_fill1.jpg);
instead of this:
background-image: url(../images/button_fill1.jpg);
Eliminates the 1 pixel padding on the inside of the button. I''m
not sure why that is.
-me-
这篇关于表格按钮边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
