MC-5025: Right/Left Margin Not Working For Content Types

- move margins to main element so that negative bottom margin will overlap below elements as expected
- update test selectors
- update master format doc

Author: anthoula

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderVideoSection.xml

@@ -32,7 +32,7 @@
         <element name="borderRadius" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
         <element name="cssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-video-inner')])[{{arg1}}]/parent::div[contains(@class,'{{arg2}}')]" parameterized="true"/>
         <element name="noCssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]" parameterized="true"/>
-        <element name="margins" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
+        <element name="margins" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
         <element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
     </section>
     <section name="VideoOnStorefront">
@@ -57,7 +57,7 @@
         <element name="borderRadius" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
         <element name="cssClasses" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@class,'{{arg2}}')]" parameterized="true"/>
         <element name="noCssClasses" type="text" selector="(//div[@data-role='video'])[{{arg1}}][not(@class)]" parameterized="true"/>
-        <element name="margins" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
+        <element name="margins" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
         <element name="padding" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
     </section>
 </sections>

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/video.xml

@@ -26,6 +26,7 @@
                     <element name="main">
                         <style name="text_align" source="text_align"/>
                         <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
+                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
                         <attribute name="appearance" source="data-appearance"/>
                         <css name="css_classes"/>
@@ -38,7 +39,6 @@
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
                     </element>
                     <element name="video">

docs/reference/master-format.md

@@ -462,6 +462,7 @@ Attributes
 
 Inline styles
 1. justify-content
+2. margin
 
 ### inner element
 
@@ -482,8 +483,7 @@ Inline styles
 2. border-color
 3. border-width
 4. border-radius
-5. margin
-6. padding
+5. padding
 
 ### video element