边距不工作的某些元件

我有2个元素不响应margin: 260px 0 0 0;或margin-top: 260px;。我不知道为什么。当我在IE中打开开发工具并检查元素时，边距在那里，但是元素停留在div顶部，好像根本没有设置margin: 260px 0 0 0;。边距不工作的某些元件

为什么在.SideContainer a {...}或.RightSide a {...}内的a元素的边距不能工作？

 <section class="RightSide SideContainer"> 
      <a href="~/Shared/Services/WebDevelopment">Packages &amp; Pricing</a> 
     </section> 


    .SideContainer h1 { 
     color: white; 
    } 

    .SideContainer a { 
     margin: 260px 0 0 0; 
    padding: 10px 15px 10px 15px; 
    background-color: #ec462f; 
    color: white; 
    } 

.RightSide { 
    float: right; 
} 

    .RightSide a { 
     margin-top: 200px; 
    }

来源

2013-05-22 jay_t55

HTTP ：//www.techrepublic.com/article/learn-distinctions-between-inline-and-block-html-elements/6094821 –

锚标签inline元素，从而预期顶部和底部边缘样式不适用于他们。设置display属性为inline-block，它应该工作。

.SideContainer a, .RightSide a { 
    display: inline-block; 
}

请记住，元素的display属性设置为inline-block会造成空间的源代码被渲染。 Here's如何防止这种情况。

另一种方法是将display属性设置为block并设置float属性（如果需要）。

.SideContainer a, .RightSide a { 
    display: block; 
    float: left; /*if required*/ 
}

来源

2013-05-22 06:10:35

内联块在我看来是最好的答案，因为它将元素保留为内联方块。默认值，内联，确实没有垂直边距，也没有垂直填充。除此之外，家长填充顶部会做到这一点。行高和垂直对齐也是一种选择，但我不知道为什么操作需要这样的修复？对我而言，没有足够的HTML来对应该做什么有真正的意见。 –

这不起作用，因为您的定位标记是内嵌元素，并且不会对边距做出响应。

如果添加display:block对.SideContainer一个你的CSS，它会移动。

http://codepen.io/anon/pen/Girwh

来源

2013-05-22 06:11:28 patkay

内联元素不保证金回应。

你需要做一个标签显示块也可以将其浮动到右所以它会表现得正确像普通的“一”标记和保证金也将作出回应。

试试这个：

.RightSide a { 
    margin-top: 200px; 
    float: right; 
}

来源

2013-05-22 06:16:22 Sumit

我对你的代码工作，你必须把display:inline-blcok在锚标记获取margin-top。

解决方案：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .SideContainer h1 { 
       color:white; 
      } 
      .SideContainer a { 
       padding:10px 15px 10px 15px; 
       background-color:#ec462f; 
       color:white; 
      } 
      .RightSide { 
       float:right; 
      } 
      .RightSide a { 
       display:inline-block; 
       margin-top:200px; 
      } 
     </style> 
    </head> 
    <body> 
     <section class="RightSide SideContainer"> 
      <a href="~/Shared/Services/WebDevelopment">Packages &amp; Pricing</a> 
     </section> 
    </body> 
</html>

来源

2013-05-22 06:49:12

我认为这是不够添加显示：块

.RightSide { 
margin-top: 200px; 
display: block; 
}

来源

2013-05-22 06:54:41

你需要浮动，您的一个标签，像这样：

.SideContainer a { 
    ... 
    float:left; 
}

来源

2013-05-23 10:43:34

边距不工作的某些元件

回答

相关问题