When I add a 100% width box inside a Main box and then add another, the two boxes butt up one on top of the other. When I type heading text in the top box, body text in the second one and then add a graphic box below that, gaps appear the between the rows. How can I control the width of those gaps so I can vary the spaces between heading, body text and image graphic?
Do you have a link to a page showing the issue?
Usually, this kind of behavior is caused by the padding/margin of paragraphs or other text content within the boxes, rather than the boxes themselves. It’s difficult to guess where to start with this in your case, so seeing it in a browser would give me more confidence that I am answering the correct question.
Walter
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.
It’s also possible to prevent a box’s margins from collapsing - so if you want to have a top/bottom margin above/below a paragraph, but you don’t want it to collapse with the parent box’s top/bottom margin, you can prevent that from happening (see the “Collapsing margins” section in the Styles chapter of the Xway User Guide).
Thank you both for getting back to me so quickly. It was indeed the 1em top and bottom margins creating the issue. I removed them where necessary and then I could set all vertical spacing I wanted to with the padding setting. Thanks Jeremy for pointing out where to go in the guide. Xway has been a big learning curve but I am getting there. I am quite pleased with how the site is coming on and will give you a link when it is live.
Paul