CSS中的Margin-Right无法正常工作

Question

我一直在学校期间涉足编码，因为对我来说它是最有趣的课程之一。大部分学年我自学了Html-Css和Js。

我一直在重新创建我们学校的网站，但遇到了一些问题。

我的CSS "Margin-Right"命令没有起作用。我一直在尝试使用CSS和"Style"命令中的margin left和right来居中一个<Div>区域，但右侧永远不起作用。
我不想只使用position: absolute;命令，因为我想在两侧留出一些空间以便看到背景。
这是我的Html代码。

CSS:

    .Isaac {
      width: 100%;
      padding: 4px;
      margin-right:100px;
      background-color: white;
      -webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 10px;
    }

HTML：

  <div class="Isaac" Style="Background-color: #E6E6E6 ; Margin-Top: 40px">
      <!-- div content -->
  </div>

编辑：我之前的“100x”是个愚蠢的错误，我本意是想写“100px”
另外，我把“Margin-Right: 100x;”改成了“margin-right:100px;”，但是还是没有任何变化
希望你能帮助我

- Isaac Sybrandy

---

如果您复制相关代码并在此处粘贴，那么我们就不必浏览您链接中的所有代码，这样会更容易些。请提供给我们引起问题的CSS部分以及HTML。 - yardie

什么是100x？同样，尝试不使用大写字母缩写。 - ForceMagic

@IsaacSybrandy - 首先，你的命令应该像这样：margin-right:100px; 而不是 Margin-Right: 100x ; 这里的大区别在于 px。花些时间查看w3schools.com上的CSS部分。 - yardie

所以你一直在自学？如果是这样，我能教你如何不在 CSS 中将任何属性大写吗？ - Eduard

关于你的代码，我有一些建议：

1. 总是使用不同的文件来存放 HTML/CSS 或其他你想要使用的内容。
2. 总是格式化你的代码。（缩进、使用制表符而不是空格、对齐块等）这里有一个维基页面编程风格，可能会有所帮助。

此外，当你想向别人展示你的代码时，可以尝试使用像 Fiddle 或 CodePen 这样的网站。这些小技巧将有助于首先帮助你自己，然后在我们尝试帮助你解决问题时也会有所帮助。 - Segmentation

Answer 1

更改：

Margin-Right: 100x;

to:

margin-right: 100px;

- AndrewL64

Answer 2

问题在于.Isaac div上的width:100%。这会导致div本身与其父元素（body）一样宽。然后，边距向右延伸，超出屏幕。

解决方法：删除width:100%。

    
    .Isaac {
      /*width: 100%;*/
      padding: 4px;
      Margin-Right: 100px;
      background-color: white;
      -webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5);
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 10px;
    }

    .myButton {
      -moz-box-shadow: inset 0px 5px 0px 0px #000000;
      -webkit-box-shadow: inset 0px 5px 0px 0px #000000;
      box-shadow: inset 0px 1px 0px 0px #000000;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
      background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
      background-color: #ffffff;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #000000;
      display: inline-block;
      cursor: pointer;
      color: #000000;
      font-family: Arial;
      font-size: 13px;
      padding: 6px 24px;
      text-decoration: none;
      text-shadow: 0px 1px 0px #000000;
    }
    
    .myButton:hover {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
      background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%);
      background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
      background-color: #ffffff;
    }
    
    .myButton:active {
      position: relative;
      top: 1px;
    }

/* I added this, because the body start tag doesn't appear in the snippet */
body {
  background-attachment: fixed; background-repeat: no-repeat; Background-size: 100% 100%; background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/32/Mount_Rainier_from_above_Myrtle_Falls_in_August.JPG)
    }

  <div class="Isaac" Style="Background-color: #E6E6E6;  Margin-Top: 40px"><img src="http://www.conway.k12.wa.us/sites/default/files/logov4.png" style="width:150px;height:50px;"><a href="#" class="Hello">Menu</a> : <a href="#" class="Hello">Family access</a> : <a href="#" class="Hello"> Facebook/Social Media<a/> : <a href="#" class="Hello"><br><a href="#" class="MyButton">District Office</a>
    <a
    href="#" class="myButton">School Office</a><a href="#" class="myButton">Departments</a><a href="#" class="myButton">Staff</a><a href="#" class="myButton">Family</a><a href="#" class="myButton">Teachers</a><a href="#" class="myButton">Board</a></div>

- Mr Lister

Answer 3

使用text-align:center将内容居中对齐

• margin-right的问题是你使用了:x而不是px

  .Isaac { width: 100%; padding: 4px; text-align: center; margin-right: 100px; background-color: white; -webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 10px; }

希望这就是您想要实现的效果

- abhinsit

---

我希望按钮不要居中，而是在两侧显示背景。 - Isaac Sybrandy