CSS 边距底部不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7142430/
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
margin-bottom not working
提问by Mark
I'm having a frustrating problem where I'm trying to set a style on a link so that it always appears 10px from the bottom of the box it is in. For some reason the margin-bottom style I have applied to it is not working...the weird thing is that margin-top, margin-right and margin-left all work, but when I put margin-bottom it doesn't register.
我遇到了一个令人沮丧的问题，我试图在链接上设置样式，以便它始终显示在距离它所在的框底部 10px 处。出于某种原因，我应用的边距底部样式不是工作......奇怪的是，margin-top、margin-right 和 margin-left 都可以工作，但是当我把 margin-bottom 放在它的时候它没有注册。
I'm sure it's likely something stupid I'm missing, but I've spent far too long trying to figure out it and trying different combos but can't seem to get it to work!
我确定这可能是我遗漏的一些愚蠢的东西，但我花了太长时间试图弄清楚它并尝试不同的组合，但似乎无法让它发挥作用！
I've tried applying the class style directly to the link tag, and also wrapping a paragraph day around the link and applying the class to it. The paragraph method works in that it positions it to the right like I want, but again it is not applying my margin-bottom: 10px;
我已经尝试将类样式直接应用于链接标签，并在链接周围包裹一个段落日并将类应用于它。段落方法的工作原理是它像我想要的那样将它定位在右边，但它再次没有应用我的 margin-bottom: 10px;
Any ideas as to what I'm doing wrong?
关于我做错了什么的任何想法？
Below are snippets of the html for the boxes, as well as the css I'm using. Any thoughts/suggestions would be greatly appreciated!
下面是框的 html 片段，以及我正在使用的 css。任何想法/建议将不胜感激！
Thanks!
谢谢！
HTML:
HTML：
<div id="boxes" class="container">
<div class="box" id="box1">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. </p>
<a href="#" class="c2action">link</a>
</div><!--box1-->
<div class="box" id="box2">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="c2a"><a href="#">link</a></p>
</div><!--box2-->
CSS:
CSS：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}
.container {margin: 0 auto; width: 940px;}
.box{
width:296px;
height:270px;
float:left;
background-color:#ebe1bf;
margin-top: 20px;
border-style: solid;
border-width: 2px;
border-color: #e0d6b2;
}
.box h2{
font-size: 16px;
margin-top: 18px;
margin-left: 24px;
color: #353535;
}
.box p{
margin-top: 10px;
margin-left: 24px;
width: 252px;
font-size:13px;
color:#525151;
}
p.c2a{
text-align:right;
margin-bottom:10px;
font-size: 14px;
color:#00FF00;
}
.c2action a {
text-align:right;
margin-bottom:10px;
font-size: 14px;
color:#FF0000;
}
#box1{
margin-right: 20px;
}
#box2{
margin-right: 20px;
}
采纳答案by Kelly Cook
Give the containing box position:relative;and give the links position:absolute; bottom:10px; right:20px. See http://jsfiddle.net/Ltnmv/.
给出包含框position:relative;并给出链接position:absolute; bottom:10px; right:20px。见http://jsfiddle.net/Ltnmv/。
回答by mkk
Your problem is that link ("a") is an INLINE element and you cannot set margin to inlines elements. In order to make it work, you have to declare it as BLOCK element, by adding:
您的问题是链接（“a”）是一个内联元素，您不能为内联元素设置边距。为了使其工作，您必须通过添加以下内容将其声明为 BLOCK 元素：
a{
display: block;
}
however be aware then it will reserve as default whole width. You might want later to add something like
但是请注意，它将保留为默认的整个宽度。你可能想稍后添加类似的东西
a{
float: left;
margin-left: 3px;
}
If you do so, you can delete display: block; because by setting float: left; you already declare it as a block element
如果这样做，您可以删除 display: block; 因为通过设置 float: left; 您已经将其声明为块元素
In your particular example, you might want to simple set padding for your parent "p" element. Both approaches are possible (setting display: block or setting padding), however the second one is more elegant. You don't really need to make it block element. Usually you use the first approach when you want to make a link image.
在您的特定示例中，您可能希望为父“p”元素简单设置填充。两种方法都是可能的（设置显示：块或设置填充），但是第二种更优雅。你真的不需要让它成为块元素。当您想要制作链接图像时，通常使用第一种方法。
回答by Mehmet
make the value of display property as inline-block .For example a {display:inline-block}
将 display 属性的值设为 inline-block 。例如 {display:inline-block}
回答by AndrewGroat
Try changing your box class to this:
尝试将您的盒子类更改为：
.box{
width:296px;
float:left;
background-color:#ebe1bf;
margin-top: 20px;
border-style: solid;
border-width: 2px;
border-color: #e0d6b2;
padding-bottom:10px;
}
The margin occurs outside the background, whereas padding occurs inside - so it might make more sense to put it on the .box class and remove it from the other elements inside the box.
边距发生在背景之外，而填充发生在内部 - 因此将它放在 .box 类上并从盒子内的其他元素中删除它可能更有意义。
You could even just put padding: 18px 24px 10px 24px; on the .box and remove all of the other margins from the h2 & p elements to safe on coding.
你甚至可以只放 padding: 18px 24px 10px 24px; 在 .box 上，并从 h2 & p 元素中删除所有其他边距以确保编码安全。
Peace!
和平！
回答by Umang
I think what you want to use is padding-bottom. Refer to the W3C documentation on the 'Box model'
回答by Ray Toal
The only margin-bottoms you used were on
您使用的唯一保证金底部位于
p.c2a, which is the last piece of HTML, so you would not see anything, and
.c2action a, which would only apply to
aelements withinelements with thec2actionclasses, but there are none of these.
p.c2a，这是最后一段 HTML，所以你什么也看不到，而且
.c2action a，它仅适用于具有类的
a元素内的元素c2action，但这些都没有。
