Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes

Space Before and Space After are commonly used Indesign parastyle options, however both Indesign and in5 convert both of those attributes as margin-top and margin-bottom, and since we know that those two attributes overlap in HTML, whichever one is larger is what wins out.

Ex Para Style has 14pts Space Before and 7pts Space after. Indesign renders two paragraphs with this style as having 21pts of gap in between them but HTML only renders 14pts. this is known. 

However in HTML/CSS margin and padding do not overlap and in fact stack. so would there be a way to change the way in5 converts the two attributes to one of the two options, ex. Space Before stays Margin-Top but Space After becomes Padding-Bottom allowing them to render correctly. I hope to do this at the conversion step or within indesign, as applying extra css rules will not apply the corrections to any paragraphs that have overrides (we have had no issues with using overrides so far in our exports btw)

closed with the note: figured it out
in feature_requests by (430 points)
closed by
  

1 Answer

0 votes
I'll check with Justin if he has any recommendations.

You may need a web developer to help with adding custom CSS.
by (24.7k points)

sorry, i actually managed to figure it out myself by adding some javascript to find <p> tags with a margin-after, and add a padding-after equal to that.

function marginToPad() {
para = $('p');
para.each(function() {
mar = $(this).css('margin-bottom');
$(this).css('padding-bottom', mar);
})
}
That's great! Thank you for sharing your code. :)