vincent marc villafuerte vincent marc villafuerte - 3 months ago 11
CSS Question

Why is negative margin on both left and right is not working?

I have an image and I put css style

margin-left:-50px
and
margin-right:-50px
but is just collapsing, it should be bigger.

Is there any alternative way to do this?

Why isn't negative margin on both left and right working properly?

Code:

<img class="myslide" src="img/text.jpg">

<Style>
.myslide {
margin-left:-50px;
margin-right:-50px;
}
</style>

Answer

I would avoid to style image element this way - same as for inputs. It is just specific element in HTML. Create wrapper, add there margin: 0 -50px; width: auto; And then specify img to width: 100%;

.page {
  width: 100px;
  margin: 0 auto;
  padding: 50px 0;
  background-color: gray;
}
.wrapper {
  margin: 0 -50px;
}
.wrapper img {
  width: 100%;
}
<div class="page">
  <div class="wrapper">
    <img src="http://www.dummyimage.com/200x100/000/fff/" />
  </div>
</div>