diff --git a/examples/context/src/main.rs b/examples/context/src/main.rs
index dd149a9f..192d57cb 100644
--- a/examples/context/src/main.rs
+++ b/examples/context/src/main.rs
@@ -22,7 +22,7 @@ fn context_container<V: IntoView + 'static>(
         s.padding(10)
             .border(1)
             .border_color(color)
-            .gap(0, 5)
+            .gap_height(5)
             .items_center()
     })
 }
@@ -43,7 +43,7 @@ fn app_view() -> impl IntoView {
             .height_full()
             .items_center()
             .justify_center()
-            .gap(0, 5)
+            .gap_height(5)
     });
 
     let id = view.id();
diff --git a/examples/dyn-container/src/main.rs b/examples/dyn-container/src/main.rs
index 03d85370..ca6e8e39 100644
--- a/examples/dyn-container/src/main.rs
+++ b/examples/dyn-container/src/main.rs
@@ -21,7 +21,7 @@ fn view_two(view: RwSignal<ViewSwitcher>) -> impl IntoView {
             view.set(ViewSwitcher::One);
         }),
     ))
-    .style(|s| s.gap(0.0, 10.0))
+    .style(|s| s.gap_height(10.0))
 }
 
 fn app_view() -> impl IntoView {
@@ -54,7 +54,7 @@ fn app_view() -> impl IntoView {
             .height_full()
             .items_center()
             .justify_center()
-            .gap(10, 0)
+            .gap_width(10)
     })
 }
 
diff --git a/examples/files/src/main.rs b/examples/files/src/main.rs
index 7c913467..7e40b7b9 100644
--- a/examples/files/src/main.rs
+++ b/examples/files/src/main.rs
@@ -79,7 +79,7 @@ fn app_view() -> impl IntoView {
         }),
     ))
     .style(|s| {
-        s.gap(5, 0)
+        s.gap_width(5)
             .width_full()
             .height_full()
             .items_center()
diff --git a/examples/flight_booker/src/main.rs b/examples/flight_booker/src/main.rs
index 1ec28e38..e7e5b21b 100644
--- a/examples/flight_booker/src/main.rs
+++ b/examples/flight_booker/src/main.rs
@@ -102,7 +102,7 @@ pub fn app_view() -> impl IntoView {
         book_button,
         success_message,
     ))
-    .style(|s| s.gap(0, 5))
+    .style(|s| s.gap_height(5))
     .style(|s| {
         s.size(100.pct(), 100.pct())
             .flex_col()
diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs
index ea1c6426..7b9dc5fa 100644
--- a/examples/layout/src/main.rs
+++ b/examples/layout/src/main.rs
@@ -94,7 +94,7 @@ fn app_view() -> impl IntoView {
             .width_full()
             .height_full()
             .padding(10.0)
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     });
 
     let id = view.id();
diff --git a/examples/layout/src/tab_navigation.rs b/examples/layout/src/tab_navigation.rs
index 02864df9..19215973 100644
--- a/examples/layout/src/tab_navigation.rs
+++ b/examples/layout/src/tab_navigation.rs
@@ -78,7 +78,7 @@ pub fn tab_navigation_view() -> impl IntoView {
         s.flex_row()
             .width_full()
             .height(TABBAR_HEIGHT)
-            .gap(5, 0)
+            .gap_width(5)
             .padding(CONTENT_PADDING)
             .border_bottom(1)
             .border_color(Color::rgb8(205, 205, 205))
diff --git a/examples/stacks/src/dyn_stack.rs b/examples/stacks/src/dyn_stack.rs
index 8fe761e3..2d288a84 100644
--- a/examples/stacks/src/dyn_stack.rs
+++ b/examples/stacks/src/dyn_stack.rs
@@ -25,5 +25,5 @@ pub fn dyn_stack_view() -> impl IntoView {
         )
         .style(|s| s.width(100).height(200).border(1)),
     )
-        .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+        .style(|s| s.flex_col().gap_height(5).margin_top(10))
 }
diff --git a/examples/stacks/src/main.rs b/examples/stacks/src/main.rs
index c592ba67..baf83020 100644
--- a/examples/stacks/src/main.rs
+++ b/examples/stacks/src/main.rs
@@ -18,7 +18,7 @@ fn app_view() -> impl IntoView {
             "Renders off-screen: true",
             stack::stack_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
         (
             "stack_from_iter".style(|s| s.font_size(16.0)),
             "From signal: false",
@@ -26,7 +26,7 @@ fn app_view() -> impl IntoView {
             "Renders off-screen: true",
             stack_from_iter::stack_from_iter_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
         (
             "dyn_stack".style(|s| s.font_size(16.0)),
             "From signal: true",
@@ -34,7 +34,7 @@ fn app_view() -> impl IntoView {
             "Renders off-screen: true",
             dyn_stack::dyn_stack_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
         (
             "virtual_stack".style(|s| s.font_size(16.0)),
             "From signal: true",
@@ -42,9 +42,9 @@ fn app_view() -> impl IntoView {
             "Renders off-screen: false",
             virtual_stack::virtual_stack_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
     )
-        .style(|s| s.flex().margin(20).width_full().height_full().gap(10, 0))
+        .style(|s| s.flex().margin(20).width_full().height_full().gap_width(10))
         .into_view();
 
     let id = view.id();
diff --git a/examples/stacks/src/stack.rs b/examples/stacks/src/stack.rs
index b19e344d..8eb0ffc2 100644
--- a/examples/stacks/src/stack.rs
+++ b/examples/stacks/src/stack.rs
@@ -16,14 +16,14 @@ pub fn stack_view() -> impl IntoView {
         stack((
             "Item 3",
             "Item 4",
-        )).style(|s| s.flex_col().gap(0, 5)),
+        )).style(|s| s.flex_col().gap_height(5)),
 
         // The vertical stack view which has flex_col() built in
         v_stack((
             "Item 5",
             "Item 6",
-        )).style(|s| s.gap(0, 5)),
+        )).style(|s| s.gap_height(5)),
 
     )
-    .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+    .style(|s| s.flex_col().gap( 5).margin_top(10))
 }
diff --git a/examples/stacks/src/stack_from_iter.rs b/examples/stacks/src/stack_from_iter.rs
index 9735c263..b4825234 100644
--- a/examples/stacks/src/stack_from_iter.rs
+++ b/examples/stacks/src/stack_from_iter.rs
@@ -10,5 +10,5 @@ pub fn stack_from_iter_view() -> impl IntoView {
     let collection: Vec<usize> = (0..10).collect();
 
     stack_from_iter(collection.iter().map(|val| format!("Item {}", val)))
-        .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+        .style(|s| s.flex_col().gap_height(5).margin_top(10))
 }
diff --git a/examples/stacks/src/virtual_stack.rs b/examples/stacks/src/virtual_stack.rs
index e318d289..61e8c348 100644
--- a/examples/stacks/src/virtual_stack.rs
+++ b/examples/stacks/src/virtual_stack.rs
@@ -27,5 +27,5 @@ pub fn virtual_stack_view() -> impl IntoView {
         )
         .style(|s| s.width(100).height(200).border(1)),
     )
-        .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+        .style(|s| s.flex_col().gap_height(5).margin_top(10))
 }
diff --git a/examples/timer/src/main.rs b/examples/timer/src/main.rs
index e76697e6..429822db 100644
--- a/examples/timer/src/main.rs
+++ b/examples/timer/src/main.rs
@@ -57,7 +57,7 @@ fn app_view() -> impl IntoView {
         stack((text("Duration: "), duration_slider)).style(|s| s.justify_between()),
         reset_button,
     ))
-    .style(|s| s.gap(5, 5));
+    .style(|s| s.gap(5));
 
     container(view).style(|s| {
         s.size(100.pct(), 100.pct())
diff --git a/examples/widget-gallery/src/main.rs b/examples/widget-gallery/src/main.rs
index f742c4bb..af576029 100644
--- a/examples/widget-gallery/src/main.rs
+++ b/examples/widget-gallery/src/main.rs
@@ -144,7 +144,7 @@ fn app_view() -> impl IntoView {
         })
         .style(|s| s);
 
-    let left = v_stack((list, inspector)).style(|s| s.height_full().gap(0.0, 5.0));
+    let left = v_stack((list, inspector)).style(|s| s.height_full().gap_height(5.0));
 
     let tab = tab(
         move || active_tab.get(),
@@ -171,7 +171,7 @@ fn app_view() -> impl IntoView {
     let tab = scroll(tab).style(|s| s.flex_basis(0).min_width(0).flex_grow(1.0));
 
     let view = h_stack((left, tab))
-        .style(|s| s.padding(5.0).width_full().height_full().gap(5.0, 0.0))
+        .style(|s| s.padding(5.0).width_full().height_full().gap_width(5.0))
         .window_title(|| "Widget Gallery".to_owned());
 
     let id = view.id();
diff --git a/examples/widget-gallery/src/radio_buttons.rs b/examples/widget-gallery/src/radio_buttons.rs
index 6c12723c..e5e4398f 100644
--- a/examples/widget-gallery/src/radio_buttons.rs
+++ b/examples/widget-gallery/src/radio_buttons.rs
@@ -47,7 +47,7 @@ pub fn radio_buttons_view() -> impl IntoView {
                         },
                     ),
                 ))
-                .style(|s| s.gap(0.0, 10.0).margin_left(5.0))
+                .style(|s| s.gap_height(10.0).margin_left(5.0))
             }),
             form_item("Disabled Radio Buttons:".to_string(), width, move || {
                 v_stack((
@@ -67,7 +67,7 @@ pub fn radio_buttons_view() -> impl IntoView {
                         })
                         .disabled(|| true),
                 ))
-                .style(|s| s.gap(0.0, 10.0).margin_left(5.0))
+                .style(|s| s.gap_height(10.0).margin_left(5.0))
             }),
             form_item("Labelled Radio Buttons:".to_string(), width, move || {
                 v_stack((
diff --git a/examples/widget-gallery/src/slider.rs b/examples/widget-gallery/src/slider.rs
index fde1ed56..1c11362b 100644
--- a/examples/widget-gallery/src/slider.rs
+++ b/examples/widget-gallery/src/slider.rs
@@ -25,7 +25,7 @@ pub fn slider_view() -> impl IntoView {
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
                 ))
-                .style(|s| s.gap(10., 10))
+                .style(|s| s.gap(10))
             }),
             form_item("Unaligned Slider:".to_string(), 120.0, move || {
                 stack((
@@ -39,7 +39,7 @@ pub fn slider_view() -> impl IntoView {
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
                 ))
-                .style(|s| s.gap(10., 10))
+                .style(|s| s.gap(10))
             }),
             form_item("Progress bar:".to_string(), 120.0, move || {
                 stack((
@@ -51,7 +51,7 @@ pub fn slider_view() -> impl IntoView {
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
                 ))
-                .style(|s| s.gap(10., 10))
+                .style(|s| s.gap(10))
             }),
         )
     })
diff --git a/examples/window-icon/src/main.rs b/examples/window-icon/src/main.rs
index 80964534..b1844097 100644
--- a/examples/window-icon/src/main.rs
+++ b/examples/window-icon/src/main.rs
@@ -24,7 +24,7 @@ fn sub_window_view(id: WindowId) -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     })
 }
 
@@ -51,7 +51,7 @@ fn app_view() -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     });
 
     let id = view.id();
diff --git a/examples/window-size/src/main.rs b/examples/window-size/src/main.rs
index abbfb671..d83d8702 100644
--- a/examples/window-size/src/main.rs
+++ b/examples/window-size/src/main.rs
@@ -20,7 +20,7 @@ fn sub_window_view(id: WindowId) -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     })
 }
 
@@ -44,7 +44,7 @@ fn app_view() -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     });
 
     let id = view.id();
diff --git a/src/inspector.rs b/src/inspector.rs
index 6f5d30af..cfeadb56 100644
--- a/src/inspector.rs
+++ b/src/inspector.rs
@@ -655,7 +655,7 @@ fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<ViewId>>) -> i
                     style_header,
                     style_list,
                     class_header,
-                    v_stack_from_iter(class_list.iter().map(text)).style(|s| s.gap(10, 10)),
+                    v_stack_from_iter(class_list.iter().map(text)).style(|s| s.gap(10)),
                 ))
                 .style(|s| s.width_full())
                 .into_any()
diff --git a/src/style.rs b/src/style.rs
index 62b0f352..158b0325 100644
--- a/src/style.rs
+++ b/src/style.rs
@@ -1352,14 +1352,45 @@ impl Style {
         self.height(height.pct())
     }
 
-    pub fn gap(self, width: impl Into<PxPct>, height: impl Into<PxPct>) -> Self {
-        let width: PxPct = width.into();
-        let height: PxPct = height.into();
+    pub fn gap_width(self, width: impl Into<PxPct>) -> Self {
+        let gap_height = self.get(Gap).height;
         self.set(
             Gap,
             Size {
-                width: width.into(),
-                height: height.into(),
+                width: width.into().into(),
+                height: gap_height,
+            },
+        )
+    }
+
+    pub fn gap_height(self, height: impl Into<PxPct>) -> Self {
+        let gap_width = self.get(Gap).width;
+        self.set(
+            Gap,
+            Size {
+                width: gap_width,
+                height: height.into().into(),
+            },
+        )
+    }
+
+    pub fn gap_width_height(self, width: impl Into<PxPct>, height: impl Into<PxPct>) -> Self {
+        self.set(
+            Gap,
+            Size {
+                width: width.into().into(),
+                height: height.into().into(),
+            },
+        )
+    }
+
+    pub fn gap(self, gap: impl Into<PxPct>) -> Self {
+        let gap = gap.into();
+        self.set(
+            Gap,
+            Size {
+                width: gap.into(),
+                height: gap.into(),
             },
         )
     }
diff --git a/src/theme.rs b/src/theme.rs
index 710e930b..0b7a2eb1 100644
--- a/src/theme.rs
+++ b/src/theme.rs
@@ -91,7 +91,7 @@ pub(crate) fn default_theme() -> Theme {
         });
 
     let labeled_checkbox_style = Style::new()
-        .gap(padding, 0.0)
+        .gap_width(padding)
         .hover(|s| s.background(hover_bg_color))
         .padding(padding)
         .transition(Background, Transition::linear(0.04))
@@ -140,7 +140,7 @@ pub(crate) fn default_theme() -> Theme {
         });
 
     let labeled_radio_button_style = Style::new()
-        .gap(padding, 0.0)
+        .gap_width(padding)
         .hover(|s| s.background(hover_bg_color))
         .padding(padding)
         .transition(Background, Transition::linear(0.04))
diff --git a/src/views/dyn_container.rs b/src/views/dyn_container.rs
index e001ccc8..6403b766 100644
--- a/src/views/dyn_container.rs
+++ b/src/views/dyn_container.rs
@@ -56,7 +56,7 @@ pub struct DynamicContainer<T: 'static> {
 ///             .height_full()
 ///             .items_center()
 ///             .justify_center()
-///             .gap(10, 0)
+///             .gap_width(10)
 ///     })
 /// }
 ///