Margin-right property, block does not move

Question

This design refuses to work:

<style> .myblock{ width:150px; height:150px; background-color:rgba(255,0,0,0.7); margin-right:-150px; } </style> <div class="myblock"></div>

Yes, you can use margin-left , but it works fine with all values, both with and without a sign. What is my problem?

Can you show the expected behavior for a negative margin-right?
In general, for positioning it is better to use special tools.
if you're talking about position: relative and the subsequent use of top bottom right left, then it's somewhat more problematic because it physically stayed in place and visually moved out
Positioning options can be many, and the choice of a particular depends on the specific markup, and the specific type that needs to be obtained

soledar10 soledar10 22.4k 5 gold signs 21 silver marks 51 bronze marks · Answer 1 · 2016-01-03T13:23:33

My opinion, why is this happening:

therefore margin-left and works

 *{ padding: 0; margin: 0; } .myblock { width: 150px; height: 150px; background-color: rgba(255, 0, 0, 0.7); margin-left: 150px; }

 <div class="myblock"></div>

In order for the margin-right work it is necessary to press it to the right edge.

 * { padding: 0; margin: 0; } .myblock { width: 150px; height: 150px; background-color: rgba(255, 0, 0, 0.7); float: right; margin-right: 150px; }

 <div class="myblock"></div>

1 answer 1