Thanks! Ok, I see what’s happening here. You’re setting the tag on your headline element to div. This creates somewhat of a unique situation for inline editing.
When you start inline editing it will decide which mode to use depending on the type of tag you’re working on. Notice how when you’re using a div you get the full editing toolbar, but when you are editing a headline or span tag it’s the smaller version.
When you’re editing a div the inline editing will always set a format which defaults to “Paragraph”. This is added as a wrapping tag. The spacing you’re seeing is because the paragraph is being added when you start the editing process. There is no way to remove this when using either inline editing or the Rich Text mode of the editor. We (on the theme development site) can’t add styling to remove the spacing as it is expected to have a consistent spacing when using paragraphs.
The conflict is that when you’re using a graphic it is affected by the paragraph spacing. It’s very unlikely you’d ever want this kind of markup if you were hand-coding a site. Because of Pro’s complexity and the sheer number of ways features can be combined it’s inevitable to run into cases like this. Our position is rather than removing or limited features because combing them can lead to adverse effects, we’d rather give you all the options and let you decide what to use. Even having the option to wrap a headline in a div is somewhat unusual, but we wanted to make it available for anyone who needed it.
Here are some suggestions.
- Use a span instead of a div. This will make things inline again and help you avoid the wrapping tag you the inline
- If you want to keep the
div > p structure you can add some custom css the element CSS below should work
$el p:last-child {
margin-bottom:0;
}
