- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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 :
why the width of the .div element increase by 30px When I set the negative margin to -15px for left and right ?
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.
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
).