negative margins revisited

… for fun and recreation.

I don't know, but maybe it is fear of “col­laps­ing margins” or some­thing of that nature, that keeps some from applying negative margins, or to use them only as a last resort.

Some even regard any and all use of nega­tive margins as hacks, which is OK as long as they under­stand that “hacks” based on valid use of standards, in the context of web design, means “clever solutions”. I like that inter­pre­tation, as there is abso­lutely nothing negative in clever use of nega­tive margins.

Whenever the word “avoid” is brought up in discus­sions, it liter­ally leaves “a void” that makes further dis­cus­sion totally mean­ing­less. What's the point in discus­sing any­thing, if relevant and potenti­ally useful argu­ments must be left out because some don't want to deal with them?

Any valid use of web standards, how­ever strange, is perfectly fine as long as leading User Agents know how it works. It's the result that counts.

basic example

First headline – H1 – on this page, and the image on right of it, are styled – via micro­tuning – as follows…

h1 {
   max-width: 70%;
}

h1+section>h2>img {
   float: right;
   margin-top: -24%;
   margin-right: -10%;
   margin-bottom: -.3em
   max-width: 40%;
   shape-outside: polygon(0 0, 0 13%, 25% 15%, 55% 98%);
   shape-margin: 0;
}
	 
@media screen and (max-width: 642px) {
h1+section>h2>img {
   margin-right: -2.6%;	 
   shape-margin: .8em;	 
}

Scroll to top of page, and zoom and/or change window-width to see how these elements are effected.

The image in my example auto­mati­cally adapts to a wide range of screen/​window widths by adjust­ing to h2 width – which in turn adjusts to section width. The end result is that the image uses avail­able space both inside and outside section effi­ciently in a fluid/​respon­sive layout.

H1 has max-width set to keep it from over­lapping the image more than intended, as it cannot interact with the image itself. H2 text and the following elements inside section adjust to shape-margin – or to regular (square) margin in browsers that don't support shapes.

keep in mind…
  • When the floated image is wider than max-width allows for on widest con­tainer width – as in my example, the image's ver­ti­cal center stays fixed relative to its con­tainer's upper content-edge during resizing.
  • When the image is narrower than max-width allows for on widest container width, the image's ver­ti­cal center will drop with reduced container width until max-width kicks in.
  • To modify the image's “resizing slope”, min-width, width and padding can be mixed in. Another useful modification tool is relative positioning.
  • Negative margins affect how, or rather where, shape edges are applied, so shape styling is best done with all other image-styles in place.

about expectations

It can be frustrating when things don't turn out as expected after hours of careful coding. However, browsers do follow the code they are given the best they can, and have no idea about what the coder expects.

To have expectations without insight and experience, is of limited use. And, to avoid concepts one doesn't fully under­stand, is to make sure one will never under­stand. Intentionally cementing lack of know­ledge by avoiding more difficult issues, most defi­nitely isn't a smart strategy.

Hands-on experience is invaluable when it comes to the more complex markup and style combin­a­tions. Let every mistake become a lesson, and I guar­an­tee that after a few hundred projects every­thing will be easier.

As for those margins: positive margins push, and negative margins pull, and that's about it. A few simple cal­cula­tions, and/​or some fine-tuning in browsers, is all that is needed to make them work as expected.

Although pulling and pushing margins on non-floats can be tricky at times, just make sure margin collapse is kept under control, and carry on testing and adjusting until the concept sinks in. It is one of the most useful tools to have in any CSS toolbox, and should not be left unused.

worth the time writing about?

Have no idea, but time passes anyway and have to be used for it not to go to waste. (There prob­ably is some logic in there some­where, but I'm not sure if it is worth wasting time to dwell on.)

It is all in the headline: “… for fun and recreation”, as that's what playing with and writing about subjects like the ones covered on this page, is to me. Especially true on gray late-autumn evenings.

sincerely  georg; sign

Hageland 03.nov.2017
last rev: 19.jan.2021

www.gunlaug.comadvice upgradeadvice upgrade navigation