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.

390885 (23) [Avatar] Offline
Hi, Keith,
Another question about this, this is a snap shot in chrome browser with dev tool info before adding
css style in Listing 4.14

It can be seen that there is a right margin on div .media-body.
But in the dev tool, the box model shows no margin there.
I also checked the child elements and no one contains a margin-right.
Do you know where does it come from?
390885 (23) [Avatar] Offline
After checking CSS code, I found that the small width div is coming from

.media { width: calc(50% - 1.5em);}

And because of div being display: block, so it should fill the left space of the line it resides.
So that causes this margin.
Am I right?
Keith J Grant (36) [Avatar] Offline
In certain situations, the Chrome devtools use that orange highlight color for parts of the box model besides just margin. As you noted, there is no margin computed on the media-body element.

Normally, this element would surround the floated image, taking up the full width of its parent. But since we established a new block formatting context (using `overflow: auto`), the element is shifted to the right, beside the floated image. The width of the element is then constrained by the edge of the parent. This orange highlights any area included in the natural width of the `modal-body`, but where its contents won't actually flow. You'll notice the width of this orange area exactly matches the width of the image.

This can be a little confusing, and I'm not entirely sure why DevTools displays the area like this.