How to create vertical space of xxx pixels?

[Mikael Mikkola]

"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.

[Milo Test]

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;
}

[Bill Bailey]

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

[Mikael Mikkola]

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.

[Bill Bailey]

I wanted to answer early, but not enough points.

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:

<p>
<img class="confluence-embedded-image image-center" 
confluence-query-params="effects=drop-shadow" 
src="...." data-image-src="....">
<p>

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.

[Mikael Mikkola]

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.

[Bill Bailey]

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.

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

[Shane_Burke]

This can also be accomplished with a <div> tag.  For example:

<div style="height:4px;"></div>