html - 右边距在 block 内不起作用

Question

我正在尝试将边距设置为文本，但是 margin-right 似乎在消息内部不起作用。为什么？

CSS:

  message
  {
  position: fixed;
  display: block;
  margin-bottom: 0px;
  width: 100%;
  height: 40px;
  background-color: rgba(26, 119, 212, 100);
  line-height: 40px;
  font-style: italic;
  text-align: left;
  overflow: hidden;
  }

  .messageotext
  {
  width: 100%;
  margin-right: 0px;
  }

html:

  <message><span class="messageotext">prova</span></message>

我希望文本显示在屏幕之外，以便我可以通过脚本语言从右向左翻译它。

Answer 1

你给了 width:100% 并且父级是 fixed 所以它不会影响如果你删除 width:100% 的 span 你会看到 margin-right

因此您可以将 text-align:right 添加到父级，这将显示 margin-right 的效果，或者您也可以使用 float:right

演示 - fiddle

通过添加

删除了浏览器默认样式

*{
    margin:0;
    padding:0;
} 

* {
  margin: 0;
  padding: 0;
}
message {
  position: fixed;
  display: block;
  margin-bottom: 0px;
  width: 100%;
  height: 40px;
  background-color: rgba(26, 119, 212, 100);
  line-height: 40px;
  font-style: italic;
  text-align: left;
  overflow: hidden;
  text-align: right;
}
.messageotext {
  /*  width: 100%;*/
  margin-right: 100px;
}

<message><span class="messageotext">prova</span>
</message>