Browsery BJ1499.S5 B76 2019

Browsery HD6072.2.U52 L363 2019

Browsery GV1469.34.P79 K46 2018

Browsery RG950.K57 2019

Browsery HQ755.85.S25 2019

Browsery QA303.2.S78 2019

Browsery RA1138.M55 2019

Browsery E184.M5 C395 2018

Browsery SF422.5.M545 2018a

I’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is no systematic treatment of negative margins anywhere. So I had to figure it out for myself. Below is my initial draft of the negative margin section.

The latest specification only says: “Negative values for margin properties are allowed, but there may be implementation-specific limits.” and leaves it at that. Not extremely helpful. MDN is mostly silent as well, and Rachel Andrew’s big overview article doesn’t mention negative margins at all.

That’s odd, especially since negative margins are a very old functionality that I might even have used in my very first CSS test somewhere back in 1998. (Unless I used position: relative; I can’t remember.)

But anyway, here is, apparently, the first-ever systematic treatment of negative margins in simple situations.

Negative margins in CSS

It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it. Also, there is an exception we’ll get to in a minute.

Here is our test element: a simple container with three paragraphs in it. Note that the paragraphs have a width of 250px. This is extremely important, due to the exception we’ll get to in a minute.

Negative margin-top and -bottom

To start, let’s give the first paragraph a -15px margin-bottom. Essentially, when the browser calculates the point where the second paragraph should start, it moves that point 15px upward. From then on the browser lays out all paragraphs as normal.

Therefore the second paragraph, being the bottom neighbour of the first one, is draw 15px closer to the first paragraph. The margin between the second and third paragraphs remains intact; the browser calculates it normally. Thus, the rest of the vertical rhythm is preserved.

This trick is useful for subtle tweaks, where the content of one element should slightly overlap the content of the one above it.

Now let’s give the second paragraph a -15px margin-top. As you see, this yields exactly the same effect. Again, the second paragraph is moved upward by 15px, and the subsequent paragraphs follow.

Margin collapsing

Also note that margin collapsing behaves different when you use negative margins. This, at least, is specified in CSS 2.1:

In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

In the last example, the first paragraph still has its default margin-bottom of 1em (Chrome; can’t find Firefox’s value).

Normally, the browser would take the first paragraph’s margin-bottom and the second one’s margin-top, figure out which one is larger, and apply that margin between the two, which would yield max(-15px,1em) = 1em. That’s not how it works, though.

In case of negative margins we take the absolute values of the two adjoining margins (15px for the second paragraph; 1em for the first), and deduct the smaller (15px) from the larger (1em). This yields about 1px (depending on the font size, of course).

Thus, negative margins are actually allowed to pull elements closer to their neighbours without being hindered by regular margin collapsing.

Now we treated negative margin-top and -bottom fully. It’s an occasionally useful effect.

Negative margin-left and -right

Negative margin-left and -right work the same, provided the element has a width. Here we apply margin-left: -10px and margin-right: 10px.

As you see, the first paragraph is now offset 10px to the left, while retaining its width. Thus, its right edge also moves 10px to the left.

The second paragraph with the negative margin-right is unaffected. The negative margin-right would influence any element to the right of the second paragraph, but there aren’t any.

To show negative margin-right in its full glory, let’s float the paragraphs, so that they have a right neighbour. Here is the reference element.

Now we’re going to sprinkle some negative margins on the paragraphs.

As you see, the second paragraph is now drawn 10px closer to the first one due to the first’s negative margin-right. This is exactly the same effect as with a negative margin-bottom.

Also note that the second paragraph has a negative margin-top, which means it is offset 10px upward. The third paragraph has a negative margin-bottom, which has no effect, since it does not have a bottom neighbour.

Remember: margin collapsing does not work on margin-left and -right; just on -top and -bottom. Therefore we do not have to worry about it in this case.

If we give the second paragraph a margin-left: -10px, the same happens. Just like with top and bottom, left and right are interchangeable for this effect.

So far, negative margin-left and -right behave exactly like negative margin-top and -bottom.

width: auto and negative margin-right

Now let’s change the behaviour of negative margin-right by giving the paragraphs width: auto. They do not have a fixed width any more; instead they fill up their parent element completely while respecting its padding. That’s how width: auto works.

The paragraph with margin-left: -10px is still offset 10px to the left, but its width grows. Thus, its right edge is not offset but stays where it is.

The negative margin-right now does the same thing. It offsets the paragraph’s right margin by 10px to the right, and the paragraph’s width increases, causing its left edge to stay where it is. This only happens when an element has width: auto. As we saw before, elements with a fixed width behave quite differently.

Finally, the third paragraph has both. Both its left and its right margins are offset by 10px, essentially negating the container’s padding: 10px;.

This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.

These are the header styles; the container has padding: 10px

h5 {
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 10px;
	margin-top: 0;
	margin-bottom: 0;
	background-color: grey;
	color: white;
	/* no width, so defaults to width: auto */	
}

Again, this is only possible if the header has width: auto. Fortunately that’s the case in 99% of real-world use cases.

This is how negative margins behave in simple situations. Now that I established a baseline I can look into how they behave in flexboxes and grids.

Online Resource

Online Resource

Dewey Library - QA671.A47 2020

Online Resource

Dewey Library - QA241.K6697 2020

Dewey Library - QA278.55.B55 2020

Dewey Library - QA614.8.A97 2019

Online Resource

Online Resource

Barker Library - QA167.B3545 2018

Dewey Library - QA63.P67 2020

Hayden Library - QA11.2.I6684 2018

The police should not have roughed up or ill-treated delivery boys

With movement restricted and government aid not sufficient, they have now started exchanging goods

The states do not have leeway or a final say in drawings boundaries of the areas that have to be opened up

Flower cultivation being a seasonal thing, many anthurium cultivators will be deprived of any relief

Massive asteroid 1998 OR2 to fly by planet Earth today!

YouTube sensation PewDiePie signs exclusive live-streaming deal with t...

Operation Samudra Setu: Around 2,000 Indians to be evacuated from Maldives...

Coronavirus in India LIVE: COVID-19 tally in Delhi mounts to 6,318 cases; d...

Rabindranath Tagore birth anniversary: Rare facts about India's first...

WATCH: Virat Kohli gives his take on possibility of hosting cricket matches...

Hayden Library - QD172.R2 R265 2012

Dewey Library - TN760.G653 2015

Hayden Library - TA459.A5171 2015 v.5B

There is an apparent decline in valuing human life in recent times. The mob lynching of Abhijeet Nath and Nilotpal Das; the killing of Girish Dutta last year etc. are just a few instances indicating this trend. Depending on specificities of each incident the factors are many including the rapid spread of hate speech, circulating […]

The post Valuing human lives – Where we are heading towards appeared first on TIMES OF ASSAM by Nilakhi Baishya.

If we are to remain socially distant in the coming months of the pandemic—and nearly every reputable health expert says we should—at least 21st century technology has prepared us for life lived in isolation. If we insist on going out, we may see a 20th century innovation become even more popular. The drive-in theater has […]

Drive-In Concerts and Even Raves Are Becoming the Rage in Europe is a post from: Open Culture. Follow us on Facebook, Twitter, and Google Plus, or get our Daily Email. And don't miss our big collections of Free Online Courses, Free Online Movies, Free eBooks, Free Audio Books, Free Foreign Language Lessons, and MOOCs.

Willem Janszoon Blaeu Celestial Globe 1602 No matter how accustomed we've grown over the centuries to flat maps of the world, they can never be perfectly accurate. Strictly speaking, no map can perfectly capture the territory it describes (an impossibility memorably fictionalized by Jorge Luis Borges in "On Exactitude in Science"), but there's a reason […]

3D Interactive Globes Now Online: Spin Through an Archive of Globes from the 17th and 18th Century is a post from: Open Culture. Follow us on Facebook, Twitter, and Google Plus, or get our Daily Email. And don't miss our big collections of Free Online Courses, Free Online Movies, Free eBooks, Free Audio Books, Free Foreign Language Lessons, and MOOCs.

xiv, 234 pages : illustrations, maps ; 25 cm

Music composer Abhishek Arora on composing music for the television series Love By Chance.

Watch the video for the answer.

The film hits screens on May 1.

Mumbai fans celebrate the release of Rajinikanth's latest film, Kabali.

Like Sunny Leone in Tu Zaroorat Nahi Tu Zaroori Hai?

We offer a sneak peek right here.

Streaming services like Netflix, Amazon Prime and Hotstar offer attractive price points to the Indian audience. Urvi Malvania reports.

Are you ready, Beliebers?

Singer Samira Koppikar tells us what its like to be a Bollywood singer, and how she achieved it.

Arun, 24, is from Kolkata. He's a bartender. Vidya, 8, studies in an English medium school. Her father is a chaiwala. Purvika, 9, has big, bright eyes. Her father works in a beer bar.All of them are united by one cause alone: To become actors and join the film industry.

'I will pick Bollywood stars to play Indian superheroes.'