390885 (23) [Avatar] Offline
#1
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
image

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
#2
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 (30) [Avatar] Offline
#3
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.