4

Please look at following html...

.wrapper {
  position: relative;
}

.mydiv1 {
  margin-left: -10px;
  margin-top: -10px;
}
<div class="wrapper">
  <div class="mydiv1">div1</div>
</div>

.mydiv1 was pulled left as 10px and through out it's parent's left border. But nothing happens on its top. Why did it work differently?

wazz
  • 4,953
  • 5
  • 20
  • 34
nyeok
  • 41
  • 1
  • 1
    Actually it does work. There must be something else. Can you show us a complete exemple ? – Baldráni May 21 '17 at 08:46
  • It doesn't work differently. See fiddle: https://jsfiddle.net/beekvang/w5Ldufcj/ – Gerard May 21 '17 at 08:46
  • @gerard your example is not the same as the OP. without changing the original code, margin-top seems to not do anything. seems like a good question. – wazz May 21 '17 at 08:51
  • Code is actually working. Open DOM inspector and check behaviour of margin – Nimish May 21 '17 at 08:54
  • Ok. When margin-top: -10px; is removed in the OP the position is different. You can easily 'deactivate' in Google developer tools. – Gerard May 21 '17 at 08:54
  • @wazz that's not correct (the part stating that it does nothing). Applying a negative value for `margin-top` on the child [moves the parent element](http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element) to top. If you want to stay with `margin-top` (instead of `top`) you could e.g. [prevent the](http://stackoverflow.com/a/1939980/3162554) [margin collapsing](http://stackoverflow.com/a/3217333/3162554), see this [JSFiddle](https://jsfiddle.net/akw18znv/). – Marvin May 21 '17 at 08:56
  • @all i was just checking in dev tools when all the comments came up. it does change the margin, just can't tell without inspection (or borders or something else). – wazz May 21 '17 at 08:59
  • 1
    Sorry guys... I found my fault... I give the style like this... .wrapper div { margin-top: 0px; } It has stronger priority... – nyeok May 21 '17 at 09:17

0 Answers0