[Merged by Bors] - Document how padding and margin behave with percentage values

crates/bevy_ui/src/ui_node.rs

@@ -237,9 +237,43 @@ pub struct Style {
     pub justify_content: JustifyContent,
     /// The position of the node as described by its Rect
     pub position: UiRect,
-    /// The margin of the node
+    /// The amount of space around a node outside its border.
+    ///
+    /// If a percentage value is used, the percentage is calculated based on the width of the parent node.
+    ///
+    /// # Example
+    /// ```
+    /// # use bevy_ui::{Style, UiRect, Val};
+    /// let style = Style {
+    ///     margin: UiRect {
+    ///         left: Val::Percent(10.),
+    ///         right: Val::Percent(10.),
+    ///         top: Val::Percent(15.),
+    ///         bottom: Val::Percent(15.)
+    ///     },
+    ///     ..Default::default()
+    /// };
+    /// ```
+    /// A node with this style and a parent with dimensions of 100px by 300px, will have calculated margins of 10px on both left and right edges, and 15px on both top and bottom egdes.
     pub margin: UiRect,
-    /// The padding of the node
+    /// The amount of space between the edges of a node and its contents.
+    ///
+    /// If a percentage value is used, the percentage is calculated based on the width of the parent node.
+    ///
+    /// # Example
+    /// ```
+    /// # use bevy_ui::{Style, UiRect, Val};
+    /// let style = Style {
+    ///     padding: UiRect {
+    ///         left: Val::Percent(1.),
+    ///         right: Val::Percent(2.),
+    ///         top: Val::Percent(3.),
+    ///         bottom: Val::Percent(4.)
+    ///     },
+    ///     ..Default::default()
+    /// };
+    /// ```
+    /// A node with this style and a parent with dimensions of 300px by 100px, will have calculated padding of 3px on the left, 6px on the right, 9px on the top and 12px on the bottom.
     pub padding: UiRect,
     /// The border of the node
     pub border: UiRect,