How to remove line spacing?

Question

Hello all!

I am using Sugarcube 2-18, and I was wondering how to remove line spacing.

I have images which need to be touching one above the other, but the line space comes between; images that are side by side touch just fine.

Here is the way I have it configured in the passage:

[img[image url]][img[image url][to-manlulka]][img[image url]][img[image url][start]][img[image url]][img[image url][to-safehame]][img[image url][to-baton]][img[image url][to-Hell]]

They are all different images, and some of them are made links.

Here is a screenshot of how it comes out with the line breaks.

I have tried the <<nobr>> macro to no avail.

Thank you in advance!

Answer 1

Ha ha! I fixed it!

<p>[img[image url]][img[image url][to-manlulka]][img[image url]][img[image url][start]][img[image url]][img[image url][to-safehame]][img[image url][to-baton]][img[image url][to-Hell]]</p>

p {
  line-height: 0px;
}

Screenshot

Comments

Of course, if anyone can inform me of a more convenient way to do this I would be grateful.

---

warning: People without Google accounts cants see your sample images, if you are going to include links to files stored on Google can I suggest you use GDrive to store the file and a "Get shareable link" option to create a link that people without a Google account can use.

I would suggest using a div element with a class attribute instead of the paragraph element, that way you aren't getting the other built-in effects the paragraph has and wont be effecting all paragraphs. I would also suggest changing the anchor elements created by the markup based image links to display as blocks instead of inline, this will force each anchor element onto its own line.

1. The passage content.

<div class="vertical">\
[img[image url]]\
[img[image url][to-manlulka]]\
[img[image url]]\
[img[image url][start]]\
...etc...
</div>

2. CSS to place within Story Stylesheet area. 

.vertical {
	line-height: 0.5;
}
.vertical > a {
	display: block;
}

 

---

Thank you for pointing that out: I know few people who do not have a Google account, so that is something I need to remember to check. I edited the links, and they should work now.

Problem

Fixed

Answer 2

As a tip.  When asking questions like "how do I make (some) code/markup do what I want?", it's generally a good idea to either show the code/markup in question or a similar example.

Regardless.  You'll probably want to use one of the line break control mechanisms:

• Line continuations
• <<nobr>> macro
• nobr special tag
• Config.passages.nobr setting

Comments

Thank you for your response! I have edited the question to add some information.

One problem is that the images have to be in separate lines, but there has to be no space between the lines, so taking out line breaks may not help.

For some additional information, here is what I have in my stylesheet:

#passages {
    max-width: 80em; /* default is 70em */
  line-spacing: 0em;
}
​
body {
    margin-left: 2em;
  background-color: #ffffff;
}
​
#ui-bar {
    display: none;
}