Hi Paul,
Vertical spacing is controlled by margins, and one aspect of CSS layout that may initially be surprising is collapsing margins. This is dealt with in the introductory Xway tutorial and in the Xway user guide [1] (search for “collapsing margins”). In this case, it means that a top margin that is applied to a paragraph that is at the top of its container is collapsing with the top margin of the container and appears as space above the container box. Ditto for bottom margins on paragraphs that are at the bottom of their container.
You can remove vertical margin space from paragraphs (including headings) by setting their top and/or bottom margins to zero in the Text section of the Paragraph Inspector.
A second factor that can cause additional vertical space below images is vertical alignment: the default vertical alignment of images (baseline) means that they are aligned with the baseline of any text that surrounds (or could surround) the images - which leaves space that is equivalent to the height of a character’s descender: that part of a character (such as “p” or “q”) that descends below the baseline. If you select an image and choose bottom vertical alignment in the Margins and Alignment section of the Box Inspector, this will cause it to be aligned with the bottom of the line that it is placed on.
Incidentally, you rarely need set 100% width on a container box: these typically take up the available width of their parent (outside of flex layout).
[1] To view the Xway User Guide, choose Xway User Guide from Xway’s Help menu. For written tutorials, choose Xway Resources from Xway’s Help menu. For video tutorials, see this post.