The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

justin-c (41) [Avatar] Offline
In the flexbox chapter (chapter 5), I'm not understanding why the use of `* + *` to apply `margin-top` to anything in `body` which is not the first child of its parent.

Is this good practice? i.e. is it usually the case that elements which are not the first child of their parent benefit from having a `margin-top` set? We end up reversing this operation later on in several places, e.g.

.site-nav > li {
margin-top: 0

.flex > * + * {
margin-top: 0;


Could you elaborate more on the use of this technique in the book? (I saw chapter 3 - the part where the lobotomized owl was introduced. I get what it does - not why we need it since it seems to cause more work having to stay reversing its effects...).

Thank you.


Later on in the chapter there is another instance of fixing the effects of the owl. Also, the same thing happens in listing 4.9 (another example which uses the owl).

Again in listing 4.10.
Keith J Grant (36) [Avatar] Offline
I do this to help illustrate the plus/minus of using the lobotomized owl. It can be a little annoying to make these minor fixes, but it's also annoying the other way, to add spacing all over the place. In later chapters, you'll see I tend to scope the lobotomized owl only to particular containers rather than the whole page, with selectors like
.tile-row > * + *
justin-c (41) [Avatar] Offline
Ok fair enough. I'll pay more attention to where it was being applied - was missing that.