确保导航栏为全宽

Question

现在我正在构建一个导航栏，我似乎无法让它达到页面的整个宽度。我尝试将保证金设置为0 auto，但这不起作用。这是截图和当前的CSS和Mockup。

截图：

正如您所看到的那样，导航栏周围有一些余量，我不再需要了。

CSS：

 .topbar {
  background-color: $topbar-background-color;
  height: $topbar-height;
  padding: 0 10px;
  position: relative;
  text-shadow: 0 1px #fff;
}

HTML：

    <div class="topbar">
    <% if user_signed_in? %>
      <%= link_to "Sign out", destroy_user_session_path, :method => :delete, class: "button" %>
    <% else %>
      <%= link_to "Sign In", new_user_session_path, class: "button" %>
      <%= link_to "Sign Up", new_user_registration_path, class: "button" %>
    <% end %>
  </div>

小提琴：

https://jsfiddle.net/38ubnfz7/

Answer 1

设置保证金时，请记住使用简写表示法（即margin: auto 0）会将第一个参数应用于顶部和底部，第二个参数应用于右侧和左侧。这与：

相同

margin-top: auto;
margin-bottom: auto;
margin-right: 0;
margin-left: 0;

无论出于何种原因，css属性都倾向于顺时针方向移动。

现在，没有小提琴，我们无法确定，但很有可能保证金从父母继承（右/左属性设置为auto）。看看是否只使用margin: 0修复了它。如果没有，请打开开发工具，看看是否有来自应用的父项的边距或填充。 Chrome有一个方便的插图：

按照节点链上的路径，直到找到有罪的容器。

您可能还想为

指定零边距或填充

body {
  margin: 0;
  padding: 0;
}

Answer 2

在我们设定身体保证金后，有上下边距：0;因为默认情况下p元素得到-webkit-margin-before：1em; -webkit-margin-after：1em;

所以你需要设置.topbar p {margin：0;} UPDATE FIDDLE 我只是在html，body部分添加一个红色边框，这样每个人都可以清楚地看到topbar和body部分之间没有边距。

感谢。

html,body{
  margin:0;
 border:1px solid red;/* just make this border for the body to make sure there is no margin between body and the topnav div */
}
.topbar {
  background-color: rgb(68,68,68);
  height: 50px;
 padding: 0 10px;
  position: relative;
  text-shadow: 0 1px #fff;
}
.topbar p{
margin:0;
background-color:lightblue;
width: 10%;
text-align: center;
}

<div class="topbar">
  <p>
  sign out
  </p>
</div>

Answer 3

关于小提琴，导航栏的父元素是正文，默认情况下它有一个边距，所以你需要处理它。

body {
   margin:0;
}

在您使用此导航栏的任何情况下，您都需要考虑其父元素以及它们如何影响其布局。