Archived topic
Strange left-aligned image spacing issue
15 replies · Started by George on July 13, 2021
I have a strange alignment issue going on. If you check the URL attached, at no. 2. the left-aligned image goes on top of the right-aligned text. The issue seems to be caused by the heading at the top. When the heading is not there, the alignment is fine (you can do a display: none; in the Inspector). Setting the heading bottom margin kinda solves the issue but I don't want to retain the heading bottom margin.
Any ideas?
Hi David, I don't think it's this. Select the h2 heading above and do a display: none; in the Inspector. It's fixed when the heading is not there!
In the image i shared - is it the vertical positioning thats the issue ?
Yes.
The issue is related to CSS Floats and how it deals with margins.
When you align left ( or right ) an Image Block, WP applies the alignleft class ( CSS float ) to the <figure> element - not the parent <div class="wp-image-block"> this leaves behind an empty div which has a 1.5em bottom margin attached to it. ( as per the image above ).
It is this 'orphaned' elements margin that is creating the space you can see in the image. The text takes on this margin whereas the floated image does not.
Simplest fix is to take advantage of collapsing margins, by increaseing the Bottom Margin on the Heading element to be at least the same as the margin on the wp-block-image which is 30px. Collapsing margins will negate this problem margin. Which is why you see the issue disappear when you delete the heading ( the buttons block has much greater bottom margin attached ).
So are you saying that to have this use case solved, I need to have heading margins greater than 30px? Meaning, I am stuck with that bottom margin for the whole site? Or use GB headlines with bottom margins at least 30px?
Other option is to negate the margin gap the other way. Try this CSS:
.wp-block-image .alignleft {
margin-top: 30px;
}This way, the image is lower when the heading is not present, though.
Theres no magic method of fixing it for the different scenarios.
Sounds like using the GB Headline block to increase the bottom margin is the best solution.
Yeah, I thought so. Great, thanks, David!
You're welcome
Hi David, just to let you know, I tried the same layout in a default WP theme and the issue you described was not there. Then in GP, all I had to do is zero out the .wp-block-image bottom margin.
.wp-block-image {
margin-bottom: 0 !important;
}Could be a GP issue worth a look?
Hmmm... you could try:
div.wp-block-image {
margin-bottom: 0 !important;
}That will stop it from stripping the margins on non floated blocks, where you need to maintain that spacing.
Might be something we can look into... but generally this is never an issue as in most cases the preceeding element ( in this case the headline ) has the same or greater bottom margin then the image block.
Understood about the rare use case, maybe Tom could also "patch that hole" now that it is found. Just a thought.
Thanks again!
