Question

我有这个CSS代码：

 .tab-box {
    border-bottom: 1px solid #666666;
    padding-bottom:5px;
 }

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;
 }

.tab-box a.activeLink { 
  background-color: #eeeeee;
  color:#666666;
  border-bottom: 0; 
  padding: 5px 15px;
 }

.tabcontent {
    padding: 5px;
    width: 99%;
 }

.hide { display: none;}

.small { 
    color: #999; 
    margin-top: 100px; 
    border: 1px solid #EEE; 
    padding: 5px; 
    font-size: 9px; 
    font-family:Calibri; 
}

我正在尝试在链接中添加边距。

我尝试将margin-top:30px;添加到.tab-box a，但它没有添加它。

我需要它，所以如果标签总是大于屏幕宽度，当它们低于彼此时它们不重叠。

这是完整代码http://jsfiddle.net/5rZP8/

的小提琴

Answer 1

您将其应用于a的孩子.tabLink元素。

而是将其应用于包含类a的{{1}}元素。

.tabLink

jsFiddle example - 它有效。

此外，您还需要添加a.tabLink { margin-top: 30px; }才能使边距生效。

Answer 2

a 默认情况下，元素显示为内联。因此，为了使保证金生效，需要这样做。

通过这种方式，浏览器会将边距和填充属性应用于锚点。

http://jsfiddle.net/5rZP8/6/

我对其进行了更新，以便您可以看到它正常工作。

.tabLink {
    margin-top:30px;
    display:inline-block;
}

Answer 3

请参阅此问题的已接受答案：display:inline with margin, padding, width, height。链接a是内嵌HTML元素，默认情况下，CSS中将显示为display: inline。 display属性的不同值将以不同方式呈现。

摘录：

请参阅CSS规范中的“Inline formatting contexts”以获取完整说明。

Answer 4

内联元素在边距方面效果不佳。添加display: inline-block;似乎有效：

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;

  display: inline-block;
  margin-top: 30px;
}

请参阅小提琴：http://jsfiddle.net/5rZP8/2/

Answer 5

链接必须是块元素才能使代码正常工作。使用它来使它们阻止级别元素，同时仍然保留其他样式：

.tab-box a { display: inline-block': }

一旦链接是块元素，div将展开以填充它们。所以现在你可以简单地添加：

.tab-box { margin-top: 30px; }

CSS边缘不起作用

5 个答案: