保证金权在区块内不起作用

Question

I'm trying to set the margins to a text, however margin-right doesn't seem to work inside message. Why?

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>

I want the text to be out the screen so I can translate it by scripting language from right to left.

Answer 1

You have given width:100% and the parent is fixed so it will not effect If you remove your width:100% of span you will see margin-right

so you can add text-align:right to parent which will show the effect of margin-right or you can also use float:right

Demo - fiddle

Removed browser default styles by adding

*{
    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> 

Answer 2

You can modify your class messageotext with the following code:

.messageotext {
    width: 100%;
    position: absolute;
    left: 100%;
}

Then you can decrease the value of left property to translate it from right to left.

Answer 3

Try using float:right

or you can also use only right:0px if position is absolute