Floated image has different margins at Blogs and Web Content

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, 7.1.X, Master
• Fix Version/s: 7.0.0 DXP FP58, 7.0.0 DXP SP9, 7.0.X, 7.1.10 DXP FP2, 7.1.1 CE GA2, 7.1.10.1 SP1, 7.1.X, Master
• Component/s: Frontend Infrastructure > WYSIWYG
• Labels:
  • ee-ts
  • liferay-dxp-70-sp9
  • liferay-dxp-71-sp1
  • liferay-fixpack-de-58-7010
  • liferay-fixpack-dxp-2-7110
• Branch Version/s:
  7.1.x, 7.0.x
• Backported to Branch:
  Committed
• Story Points: 0.25
• Fix Priority: 2
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/62185

A floated image inserted into a Web Content or Blog has a default margin of 24px, margin-right when floating left and margin-left when floating right. The issue is when there's some large text the margins on the top and bottom can be unequal, so the image will have a left/right space and none at the top and bottom. 

Steps to reproduce:

1. Create a new Web Content or Blog
2. Add a large text and an image
3. Align the image to the left/right
4. Depending on the text and image size you'll need to press Enter in the beginning/middle of the text in order to reproduce the issue.

 Actual Result: Margin applied to the left/right is fixed and may be different from the top and bottom margins. (Attached image)

 Expected Result: All the image's margins are equal besides any change in the text.

 

PS: The default margin exists to prevent lists to overlap the image.