Why does CSS negative margin left and right increase size of element?

[mouad]

I have the following code :
* {
box-sizing: border-box;
}

.blue {
color: #fff;
background-color: blue;
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}

.violet {
color: #fff;
background-color: blueviolet;
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}

.div {
background: black;
color: white;
margin: 50px auto;
display: flex;
margin-left: -15px;
margin-right: -15px;
}

.xont {
width: 60%;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
html :

This is div 1

This is div 2

why the width of the .div element increase by 30px When I set the negative margin to -15px for left and right ?

[CristinaBSunseri]

Hello Mouad, You can find your problem solution in http://dustyreagan.com/using-css-to-absolute-position-object/ website or in https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/ website. These website are very useful. I am developer and recently my client told me to do some changes in https://edubirdie.com/word-counter page. And with help of those websites which I have shared with you, I have edited that page for my client easily and my client is impressive with my work. It is all because of information which was given in those 2 websites.

[yeeyang]

Imagine, if you will, that margin in the wild generally tries to push things away from itself. A margin: 15px will push elements away by 15px. Now, imagine the inverse affect where margin is no longer push but pulling or stretching the element. So instead of pushing (15px) out from itself, now its pulling from itself (-15px).

[Author]

Posts