How to create vertical space of xxx pixels?

"Ability to vertically align images in the editor" https://jira.atlassian.com/browse/CONF-32237 is Unresolved.

That seems to be more about nice WYSIWYG editing, but is there any technical way to creat vertical space, either above images or (preferably) generally?

I have only partial answers, not covering < 9.5 mm (43px?) vertical space (except exactly ~7 mm (32px?)):

  • Using Shift-Enter I get 7 mm (32 px?) vertical space, but that cannot be adjusted (except by adding several Shift-Enters or so).
  • Enter or the like: ~9.5 mm (= 43 px?) additional vertical space.
  • Adding a HTML macro above the image and inserting the following code with one of the 0px's replaced by a suitable margin (e.g., 3.5 cm):

    <p style="margin-bottom: 0px; margin-top: 0px">

    • However, the I always get the additional ~9.5 mm.

A partial solution for images only does not work:

https://confluence.atlassian.com/conf57/confluence-wiki-markup-701435350.html
! myimage.png|align=right, vspace=4!
(without the space after the "!" above and below)
Whether I wrote that directly or use Insert > Wiki Markup, the following happens:
I see the vertical space always in the Edit mode but no longer in the Preview or Save mode!

! myimage.png|align=bottom, vspace=16,border=8,bordercolor=yellow!
"border" works (but the width is always 1 (or so it seems) if the border parameter is not 0; not the 8px as it should be),
bodercolor does not work (the border is always black),
again vspace works in the Edit mode but not in the Preview or Save modes.

I have Confluence 5.7 (Server). Tried both IE and Firefox.

2 answers

This widget could not be displayed.

Not exactly what you are trying to do. Do you just want all images to have an additional 43px of space above?

I'd like to have Npx vertical space.

As explained above, I have the above (ugly) solution when N >= 43, and Shift-Enter works when I wish ~32px, but in all other cases I have no solutions (and even for the above cases a less ugly solution would be nice too).

When I happen to be working with images, that vspace would be a very nice solution, but it does not work. Of course it would be even better to have a solution that produces vertical space above any element, but often it is an image that you want to position.

 

 

I wanted to answer early, but not enough points. wink

This type of spacing is best controlled via CSS. You can customize the CSS for Confluence either site-wide or at the space level.

https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html

and

https://confluence.atlassian.com/doc/styling-fonts-in-confluence-174751968.html

Typically you want to use the inspect element function (Firebug plugin) within Firefox to identify the structure (you need the HTML tag and class names). So for an image, it typically appears as:

&lt;p&gt;
&lt;img class="confluence-embedded-image image-center" 
confluence-query-params="effects=drop-shadow" 
src="...." data-image-src="...."&gt;
&lt;p&gt;


So you can style either the img tag (there are limits) or the parent <p> tags. The same process applies to all the other HTML tags on the page.

Thanks. So if I use that, all images (in that space) get that same padding?

Or just some, if I use Milo's trick, but even so I only have 2 choices (or slightly more, if H5 too) for each image?

And H5-H6 is a bit problematic, though H5-H6 are not that important, so I might use them to have 2 choices + the standard one instead of having the same upper padding for each image in the space. (+ all from 9.5mm upwards, as detailed in my post).

So neither solution is good or neat but both are sometimes better than nothing, therefore the +1's to each.

And both solutions can be applied to some other elements in place of images, but still it is strange that there is no "vertical space" parameter in general and that of images no longer works.

Yes, the idea with CSS is you can control the look and feel of all tags with the same class/Id throughout the space or site with a few lines of code. Once you update the CSS all pages with images will have the padding apply. No manual editing required. Or if later, management decides they want more or less spacing, you can tell them it will take days of work, but in reality it will take less than 5 mins. Change a number in one line of code and save. Then you have the rest of the time to drink coffee and chat with your friends. wink

With CSS you can control the look and feel of all your content and create rules that apply different spacing between H1 and H2 when H2 immediately follows an H1, for example. Or make H2 look more distinct than the default Atlassian styling. Maybe you decide to use your corporate color for H1 – all possible.

If you are at all lazy like me, then use CSS. If you want lots of manual work (and rework) then add H5/6 above each figure. When you have a 1,000 pages with 2,000 images, CSS is really the only solution. If management tells me they want to change the font face, size and color, I can do all that for all pages with one file – takes a most a day to implement and test (and that allows for a long coffee breaks and a long lunch).

Here are some demo pages I show to customers to give them an idea of what is possible in page layout and styling:

http://confluence.marketcomllc.com/display/PUBLIC/Vivamus+Varius

 

This widget could not be displayed.

One way would be to format each image you want padded with a Heading you aren't using, like Heading 6, then pad that heading in CSS.

h6 {
    padding-top: 32px;
}

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

363 views 2 5
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you