Highlighted

Margins

Community Beginner ,
Apr 29, 2019

Copy link to clipboard

Copied

Hi,

It seems that inside a Drop-down text “box”, top and bottom margins do not work. I position my cursor at the beginning of the paragraph, insert the value (ex.: 6 pt for bottom or top, depending) and the paragraph stays the same. Left margin is possible (ex.: 14 pt).

Pierre

Views

100

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Margins

Community Beginner ,
Apr 29, 2019

Copy link to clipboard

Copied

Hi,

It seems that inside a Drop-down text “box”, top and bottom margins do not work. I position my cursor at the beginning of the paragraph, insert the value (ex.: 6 pt for bottom or top, depending) and the paragraph stays the same. Left margin is possible (ex.: 14 pt).

Pierre

Views

101

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Amebr LATEST
Adobe Community Professional ,
Apr 29, 2019

Copy link to clipboard

Copied

I think a lot of the problems you are experiencing is because the new RH is more compliant with HTML standards, and thus requires the user to understand more about the underlying HTML.

I'm going to make two assumptions.

1. You are using the General tab of the Properties panel to apply your change.

2. You aren't very familiar with HTML and CSS.

I apologise if you know this already, but I figure it's easier to start from the beginning, just in case.

The Properties > General tab applies formatting only to the HTML element your cursor is currently inside. This does not mean "paragraph". It could be a span element, a b (bold) element, a div element, depending on what exactly you click on and how the HTML code has been written. There are a huge number of variations, especially when content is imported from another application.

The problem is, you can't necessarily see some of these elements in the RH editor. For example a span is "invisible" until it is formatted in some way. What might have happened is you have a span element surrounding your text, but there is no formatting (for example bold, or red) applied so you can't see that it is there.

However, you can use the bar at the top of the topic to see what hierarchy of elements is. For ease, I'll call it the element bar, but I'm not sure what Adobe calls it.

In this example, even though my cursor is at the start of the paragraph, you can see there is a span element in the element bar. That last element is where my formatting will be applied. You can also see this information in the Type field in the Properties panel: my formatting will be applied to whatever element displays in Type.

Now, for inline elements, which includes span, b (bold), strong and a (anchor / hyperlink), only left and right margins are allowed. Top,  bottom, left and right can be applied to a block element, such as a p (paragraph), div, or h1-h6 (headings). In my example, I'm currently inside a span tag, so applying a margin will not work. You can apply it, but it won't actually show up; browsers will just pretend that setting doesn't exist, as you can see in the RH editor.

To apply the margin to the paragraph, I can click on the p tag in the element bar. That will select the paragraph, and I can now apply a margin.

Styles

One final thing. Everything I've discussed above only applies to the specific element you've clicked in. Using the General tab, the formatting is applied in-line and will not affect any other place in your project. If you want the dropdown text "box" to always be further away from the dropdown heading, you will need to update the applicable style using the Styles tab. You could also make the change by opening the stylesheet, if you know the style name you need to update.

In the case of the dropdown text box, the style is applied to a div element, so I need to select Div Styles in the dropdown box in the Styles panel. The div style droptext should be selected. Hover the cursor over the style name, click the edit icon to open the stylesheet and make any changes needed.

Note: In the sample project I was using, the style wasn't available so I had to manually create the appropriate style: click the + icon, type 'div' in the Tag field and 'droptext' in the Class field. Skip the Pseudo Class field. I found the style name by switching to code view, but I won't go into details for the moment.

Hopefully this helps.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...