Html CSS 代码仅在不影响背景的情况下在文本上方留出空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11993870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS code to margin space above text Only without effecting the background?
提问by user1594603
I have a class that has both a background image and text, I'm trying to figure out a way to manipulate the space above the Text Only, using the "margin" tag will change the position of the entire thing (image + text), I need to control the text only.
我有一个具有背景图像和文本的类，我试图找出一种方法来操纵纯文本上方的空间，使用“边距”标签将改变整个事物的位置（图像+文本） ，我只需要控制文本。
text-indent gives me some control over the horizontal spacing, I need something to have more control over the space above and below the text only if such thing exists.
text-indent 可以让我对水平间距进行一些控制，只有在这种情况存在时，我才需要一些东西来更好地控制文本上方和下方的空间。
Here's the CSS class:
这是 CSS 类：
.contactb { float:left; margin:0 5px 0 0; padding:0 0; background:url(images/contact_b.png) top no-repeat; display:block; width:108px; height:57px; font-family: 'hand-webfont'; color:black; font-size:17px; }
Here's the HTML code:
这是 HTML 代码：
<li><a href="contact.html" class="contactb">Contact</a></li>
Any help would be appreciated guys.
任何帮助将不胜感激。
回答by Billy Moat
What you're looking for simply 'padding'.
您正在寻找的只是“填充”。
.myClass {
padding-top:10px
padding-bottom:10px;
}
回答by Cynthia
Here's a working example of what I think you're trying to do: http://jsfiddle.net/yhV78/
这是我认为您正在尝试做的一个工作示例：http: //jsfiddle.net/yhV78/
The trick:
诀窍：
- create one div that contains your background image (in my case, the background is the bunny)
- create an inner div (or series of divs) that contains your content. You can position them either by adjusting the padding on the inner divs or by a combination of relative and absolute positioning.
- 创建一个包含背景图像的 div（在我的例子中，背景是兔子）
- 创建一个包含您的内容的内部 div（或一系列 div）。您可以通过调整内部 div 上的填充或通过相对和绝对定位的组合来定位它们。
回答by Jan Hnila
The trick is to combine padding with background-origin... Though, it is supported only in CSS3 capable browsers (not in older IE versions: < IE9)
诀窍是将 padding 与background-origin结合起来......不过，它只在支持 CSS3 的浏览器中受支持（而不是在较旧的 IE 版本中：< IE9）
This
这个
background-origin:border-box;
背景原点：边框框；
plus appropriate paddingworks fine for me... (The default value for background-origin is padding-box, which is the reason, padding alone doesn't work for you...)
加上适当的填充对我来说很好......（背景原点的默认值是填充框，这就是原因，单独填充对你不起作用......）
