Add padding to new text in ui example (#12567)

# Objective

#11237 added some new text to the UI example. Unlike the other text
sharing the same container just above, this new text has no padding and
straddles the edge of the screen.

## Solution

Move the padding to the container, and add `row_gap` so nodes placed in
the container get some vertical separation as well.

Before / After
<img width="320" alt="12567-before (1)"
src="https://github.com/bevyengine/bevy/assets/200550/de0aa142-c715-4c57-b607-d1bdc5d20a01">
<img width="320" alt="12567-after"
src="https://github.com/bevyengine/bevy/assets/200550/70b5c9db-9cb2-4f92-88b0-83590ea838b0">

examples/ui/ui.rs

@@ -62,6 +62,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             style: Style {
                                 width: Val::Percent(100.),
                                 flex_direction: FlexDirection::Column,
+                                padding: UiRect::all(Val::Px(5.)),
+                                row_gap: Val::Px(5.),
                                 ..default()
                             },
                             background_color: Color::srgb(0.15, 0.15, 0.15).into(),
@@ -77,11 +79,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                         font_size: 30.0,
                                         ..default()
                                     },
-                                )
-                                .with_style(Style {
-                                    margin: UiRect::all(Val::Px(5.)),
-                                    ..default()
-                                }),
+                                ),
                                 // Because this is a distinct label widget and
                                 // not button/list item text, this is necessary
                                 // for accessibility to treat the text accordingly.