Add support for asymmetrical padding

core/src/lib.rs

@@ -22,6 +22,7 @@ mod background;
 mod color;
 mod font;
 mod length;
+mod padding;
 mod point;
 mod rectangle;
 mod size;
@@ -32,6 +33,7 @@ pub use background::Background;
 pub use color::Color;
 pub use font::Font;
 pub use length::Length;
+pub use padding::Padding;
 pub use point::Point;
 pub use rectangle::Rectangle;
 pub use size::Size;

core/src/padding.rs

@@ -0,0 +1,65 @@
+/// An amount of space to pad for each side of a box
+#[derive(Debug, Hash, Copy, Clone)]
+pub struct Padding {
+    /// Top padding
+    pub top: u16,
+    /// Right padding
+    pub right: u16,
+    /// Bottom padding
+    pub bottom: u16,
+    /// Left padding
+    pub left: u16,
+}
+
+impl Padding {
+    /// Padding of zero
+    pub const ZERO: Padding = Padding {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    };
+
+    /// Create a Padding that is equal on all sides
+    pub const fn new(padding: u16) -> Padding {
+        Padding {
+            top: padding,
+            right: padding,
+            bottom: padding,
+            left: padding,
+        }
+    }
+}
+
+impl std::convert::From<u16> for Padding {
+    fn from(p: u16) -> Self {
+        Padding {
+            top: p,
+            right: p,
+            bottom: p,
+            left: p,
+        }
+    }
+}
+
+impl std::convert::From<[u16; 2]> for Padding {
+    fn from(p: [u16; 2]) -> Self {
+        Padding {
+            top: p[0],
+            right: p[1],
+            bottom: p[0],
+            left: p[1],
+        }
+    }
+}
+
+impl std::convert::From<[u16; 4]> for Padding {
+    fn from(p: [u16; 4]) -> Self {
+        Padding {
+            top: p[0],
+            right: p[1],
+            bottom: p[2],
+            left: p[3],
+        }
+    }
+}

core/src/size.rs

@@ -1,4 +1,4 @@
-use crate::Vector;
+use crate::{Padding, Vector};
 use std::f32;
 
 /// An amount of space in 2 dimensions.
@@ -28,10 +28,10 @@ impl Size {
     pub const INFINITY: Size = Size::new(f32::INFINITY, f32::INFINITY);
 
     /// Increments the [`Size`] to account for the given padding.
-    pub fn pad(&self, padding: f32) -> Self {
+    pub fn pad(&self, padding: Padding) -> Self {
         Size {
-            width: self.width + padding * 2.0,
+            width: self.width + (padding.left + padding.right) as f32,
-            height: self.height + padding * 2.0,
+            height: self.height + (padding.top + padding.bottom) as f32,
         }
     }
 }

graphics/src/overlay/menu.rs

@@ -2,8 +2,8 @@
 use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
 use iced_native::{
-    mouse, overlay, Color, Font, HorizontalAlignment, Point, Rectangle,
+    mouse, overlay, Color, Font, HorizontalAlignment, Padding, Point,
-    VerticalAlignment,
+    Rectangle, VerticalAlignment,
 };
 
 pub use iced_style::menu::Style;
@@ -45,7 +45,7 @@ where
         viewport: &Rectangle,
         options: &[T],
         hovered_option: Option<usize>,
-        padding: u16,
+        padding: Padding,
         text_size: u16,
         font: Font,
         style: &Style,
@@ -53,7 +53,7 @@ where
         use std::f32;
 
         let is_mouse_over = bounds.contains(cursor_position);
-        let option_height = text_size as usize + padding as usize * 2;
+        let option_height = (text_size + padding.top + padding.bottom) as usize;
 
         let mut primitives = Vec::new();
 
@@ -72,7 +72,7 @@ where
                 x: bounds.x,
                 y: bounds.y + (option_height * i) as f32,
                 width: bounds.width,
-                height: f32::from(text_size + padding * 2),
+                height: f32::from(text_size + padding.top + padding.bottom),
             };
 
             if is_selected {
@@ -88,7 +88,7 @@ where
             primitives.push(Primitive::Text {
                 content: option.to_string(),
                 bounds: Rectangle {
-                    x: bounds.x + f32::from(padding),
+                    x: bounds.x + padding.left as f32,
                     y: bounds.center_y(),
                     width: f32::INFINITY,
                     ..bounds

graphics/src/widget/button.rs

@@ -5,7 +5,7 @@ use crate::defaults::{self, Defaults};
 use crate::{Backend, Primitive, Renderer};
 use iced_native::mouse;
 use iced_native::{
-    Background, Color, Element, Layout, Point, Rectangle, Vector,
+    Background, Color, Element, Layout, Padding, Point, Rectangle, Vector,
 };
 
 pub use iced_native::button::State;
@@ -21,7 +21,7 @@ impl<B> iced_native::button::Renderer for Renderer<B>
 where
     B: Backend,
 {
-    const DEFAULT_PADDING: u16 = 5;
+    const DEFAULT_PADDING: Padding = Padding::new(5);
 
     type Style = Box<dyn StyleSheet>;
 

graphics/src/widget/pick_list.rs

@@ -2,7 +2,8 @@
 use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
 use iced_native::{
-    mouse, Font, HorizontalAlignment, Point, Rectangle, VerticalAlignment,
+    mouse, Font, HorizontalAlignment, Padding, Point, Rectangle,
+    VerticalAlignment,
 };
 use iced_style::menu;
 
@@ -19,7 +20,7 @@ where
 {
     type Style = Box<dyn StyleSheet>;
 
-    const DEFAULT_PADDING: u16 = 5;
+    const DEFAULT_PADDING: Padding = Padding::new(5);
 
     fn menu_style(style: &Box<dyn StyleSheet>) -> menu::Style {
         style.menu()
@@ -30,7 +31,7 @@ where
         bounds: Rectangle,
         cursor_position: Point,
         selected: Option<String>,
-        padding: u16,
+        padding: Padding,
         text_size: u16,
         font: Font,
         style: &Box<dyn StyleSheet>,
@@ -56,7 +57,8 @@ where
             font: B::ICON_FONT,
             size: bounds.height * style.icon_size,
             bounds: Rectangle {
-                x: bounds.x + bounds.width - f32::from(padding) * 2.0,
+                x: bounds.x + bounds.width
+                    - f32::from(padding.left + padding.right),
                 y: bounds.center_y(),
                 ..bounds
             },
@@ -74,7 +76,7 @@ where
                         font,
                         color: style.text_color,
                         bounds: Rectangle {
-                            x: bounds.x + f32::from(padding),
+                            x: bounds.x + f32::from(padding.left),
                             y: bounds.center_y(),
                             ..bounds
                         },

native/src/layout/flex.rs

@@ -16,9 +16,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
 use crate::{
     layout::{Limits, Node},
-    Align, Element, Point, Size,
+    Align, Element, Padding, Point, Size,
 };
 
 /// The main axis of a flex layout.
@@ -62,7 +63,7 @@ pub fn resolve<Message, Renderer>(
     axis: Axis,
     renderer: &Renderer,
     limits: &Limits,
-    padding: f32,
+    padding: Padding,
     spacing: f32,
     align_items: Align,
     items: &[Element<'_, Message, Renderer>],
@@ -141,14 +142,15 @@ where
         }
     }
 
-    let mut main = padding;
+    let pad = axis.pack(padding.left as f32, padding.top as f32);
+    let mut main = pad.0;
 
     for (i, node) in nodes.iter_mut().enumerate() {
         if i > 0 {
             main += spacing;
         }
 
-        let (x, y) = axis.pack(main, padding);
+        let (x, y) = axis.pack(main, pad.1);
 
         node.move_to(Point::new(x, y));
 
@@ -166,7 +168,7 @@ where
         main += axis.main(size);
     }
 
-    let (width, height) = axis.pack(main - padding, cross);
+    let (width, height) = axis.pack(main - pad.0, cross);
     let size = limits.resolve(Size::new(width, height));
 
     Node::with_children(size.pad(padding), nodes)

native/src/layout/limits.rs

@@ -1,4 +1,4 @@
-use crate::{Length, Size};
+use crate::{Length, Padding, Size};
 
 /// A set of size constraints for layouting.
 #[derive(Debug, Clone, Copy)]
@@ -117,8 +117,11 @@ impl Limits {
     }
 
     /// Shrinks the current [`Limits`] to account for the given padding.
-    pub fn pad(&self, padding: f32) -> Limits {
+    pub fn pad(&self, padding: Padding) -> Limits {
-        self.shrink(Size::new(padding * 2.0, padding * 2.0))
+        self.shrink(Size::new(
+            (padding.left + padding.right) as f32,
+            (padding.top + padding.bottom) as f32,
+        ))
     }
 
     /// Shrinks the current [`Limits`] by the given [`Size`].

native/src/lib.rs

@@ -61,8 +61,8 @@ mod debug;
 mod debug;
 
 pub use iced_core::{
-    Align, Background, Color, Font, HorizontalAlignment, Length, Point,
+    Align, Background, Color, Font, HorizontalAlignment, Length, Padding,
-    Rectangle, Size, Vector, VerticalAlignment,
+    Point, Rectangle, Size, Vector, VerticalAlignment,
 };
 pub use iced_futures::{executor, futures, Command};
 

native/src/overlay/menu.rs

@@ -8,8 +8,8 @@ use crate::scrollable;
 use crate::text;
 use crate::touch;
 use crate::{
-    Clipboard, Container, Element, Hasher, Layout, Length, Point, Rectangle,
+    Clipboard, Container, Element, Hasher, Layout, Length, Padding, Point,
-    Scrollable, Size, Vector, Widget,
+    Rectangle, Scrollable, Size, Vector, Widget,
 };
 
 /// A list of selectable options.
@@ -20,7 +20,7 @@ pub struct Menu<'a, T, Renderer: self::Renderer> {
     hovered_option: &'a mut Option<usize>,
     last_selection: &'a mut Option<T>,
     width: u16,
-    padding: u16,
+    padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
     style: <Renderer as self::Renderer>::Style,
@@ -45,7 +45,7 @@ where
             hovered_option,
             last_selection,
             width: 0,
-            padding: 0,
+            padding: Padding::ZERO,
             text_size: None,
             font: Default::default(),
             style: Default::default(),
@@ -58,9 +58,14 @@ where
         self
     }
 
-    /// Sets the padding of the [`Menu`].
+    /// Sets the [`Padding`] of the [`Menu`].
-    pub fn padding(mut self, padding: u16) -> Self {
+    ///```ignore
-        self.padding = padding;
+    /// Menu::new(/*...*/).padding(20);              // 20px on all sides
+    /// Menu::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Menu::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -261,7 +266,7 @@ struct List<'a, T, Renderer: self::Renderer> {
     options: &'a [T],
     hovered_option: &'a mut Option<usize>,
     last_selection: &'a mut Option<T>,
-    padding: u16,
+    padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
     style: <Renderer as self::Renderer>::Style,
@@ -294,7 +299,7 @@ where
         let size = {
             let intrinsic = Size::new(
                 0.0,
-                f32::from(text_size + self.padding * 2)
+                f32::from(text_size + self.padding.top + self.padding.bottom)
                     * self.options.len() as f32,
             );
 
@@ -359,8 +364,11 @@ where
 
                     *self.hovered_option = Some(
                         ((cursor_position.y - bounds.y)
-                            / f32::from(text_size + self.padding * 2))
+                            / f32::from(
-                            as usize,
+                                text_size
+                                    + self.padding.top
+                                    + self.padding.bottom,
+                            )) as usize,
                     );
 
                     if let Some(index) = *self.hovered_option {
@@ -430,7 +438,7 @@ pub trait Renderer:
         viewport: &Rectangle,
         options: &[T],
         hovered_option: Option<usize>,
-        padding: u16,
+        padding: Padding,
         text_size: u16,
         font: Self::Font,
         style: &<Self as Renderer>::Style,

native/src/renderer/null.rs

@@ -1,7 +1,7 @@
 use crate::{
     button, checkbox, column, container, pane_grid, progress_bar, radio, row,
     scrollable, slider, text, text_input, Color, Element, Font,
-    HorizontalAlignment, Layout, Point, Rectangle, Renderer, Size,
+    HorizontalAlignment, Layout, Padding, Point, Rectangle, Renderer, Size,
     VerticalAlignment,
 };
 
@@ -145,7 +145,7 @@ impl text_input::Renderer for Null {
 }
 
 impl button::Renderer for Null {
-    const DEFAULT_PADDING: u16 = 0;
+    const DEFAULT_PADDING: Padding = Padding::ZERO;
 
     type Style = ();
 

native/src/widget/button.rs

@@ -7,7 +7,8 @@ use crate::mouse;
 use crate::overlay;
 use crate::touch;
 use crate::{
-    Clipboard, Element, Hasher, Layout, Length, Point, Rectangle, Widget,
+    Clipboard, Element, Hasher, Layout, Length, Padding, Point, Rectangle,
+    Widget,
 };
 use std::hash::Hash;
 
@@ -37,7 +38,7 @@ pub struct Button<'a, Message, Renderer: self::Renderer> {
     height: Length,
     min_width: u32,
     min_height: u32,
-    padding: u16,
+    padding: Padding,
     style: Renderer::Style,
 }
 
@@ -89,9 +90,14 @@ where
         self
     }
 
-    /// Sets the padding of the [`Button`].
+    /// Sets the [`Padding`] of the [`Button`].
-    pub fn padding(mut self, padding: u16) -> Self {
+    ///```ignore
-        self.padding = padding;
+    /// Button::new(/*...*/).padding(20);              // 20px on all sides
+    /// Button::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Button::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```   
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -140,18 +146,20 @@ where
         renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let padding = f32::from(self.padding);
         let limits = limits
             .min_width(self.min_width)
             .min_height(self.min_height)
             .width(self.width)
             .height(self.height)
-            .pad(padding);
+            .pad(self.padding);
 
         let mut content = self.content.layout(renderer, &limits);
-        content.move_to(Point::new(padding, padding));
+        content.move_to(Point::new(
+            self.padding.left.into(),
+            self.padding.top.into(),
+        ));
 
-        let size = limits.resolve(content.size()).pad(padding);
+        let size = limits.resolve(content.size()).pad(self.padding);
 
         layout::Node::with_children(size, vec![content])
     }
@@ -258,7 +266,7 @@ where
 /// [renderer]: crate::renderer
 pub trait Renderer: crate::Renderer + Sized {
     /// The default padding of a [`Button`].
-    const DEFAULT_PADDING: u16;
+    const DEFAULT_PADDING: Padding;
 
     /// The style supported by this renderer.
     type Style: Default;

native/src/widget/column.rs

@@ -5,7 +5,8 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Align, Clipboard, Element, Hasher, Layout, Length, Point, Rectangle, Widget,
+    Align, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
+    Rectangle, Widget,
 };
 
 use std::u32;
@@ -14,7 +15,7 @@ use std::u32;
 #[allow(missing_debug_implementations)]
 pub struct Column<'a, Message, Renderer> {
     spacing: u16,
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -35,7 +36,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     ) -> Self {
         Column {
             spacing: 0,
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -55,9 +56,14 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
         self
     }
 
-    /// Sets the padding of the [`Column`].
+    /// Sets the [`Padding`] of the [`Column`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// Column::new(/*...*/).padding(20);              // 20px on all sides
+    /// Column::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Column::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -129,7 +135,7 @@ where
             layout::flex::Axis::Vertical,
             renderer,
             &limits,
-            self.padding as f32,
+            self.padding,
             self.spacing as f32,
             self.align_items,
             &self.children,

native/src/widget/container.rs

@@ -5,7 +5,8 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Align, Clipboard, Element, Hasher, Layout, Length, Point, Rectangle, Widget,
+    Align, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
+    Rectangle, Widget,
 };
 
 use std::u32;
@@ -15,7 +16,7 @@ use std::u32;
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
 pub struct Container<'a, Message, Renderer: self::Renderer> {
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -36,7 +37,7 @@ where
         T: Into<Element<'a, Message, Renderer>>,
     {
         Container {
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -48,9 +49,14 @@ where
         }
     }
 
-    /// Sets the padding of the [`Container`].
+    /// Sets the [`Padding`] of the [`Container`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// Container::new(/*...*/).padding(20);              // 20px on all sides
+    /// Container::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Container::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -127,23 +133,24 @@ where
         renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let padding = f32::from(self.padding);
-
         let limits = limits
             .loose()
             .max_width(self.max_width)
             .max_height(self.max_height)
             .width(self.width)
             .height(self.height)
-            .pad(padding);
+            .pad(self.padding);
 
         let mut content = self.content.layout(renderer, &limits.loose());
         let size = limits.resolve(content.size());
 
-        content.move_to(Point::new(padding, padding));
+        content.move_to(Point::new(
+            self.padding.left.into(),
+            self.padding.top.into(),
+        ));
         content.align(self.horizontal_alignment, self.vertical_alignment, size);
 
-        layout::Node::with_children(size.pad(padding), vec![content])
+        layout::Node::with_children(size.pad(self.padding), vec![content])
     }
 
     fn on_event(

native/src/widget/pane_grid/title_bar.rs

@@ -2,7 +2,9 @@ use crate::container;
 use crate::event::{self, Event};
 use crate::layout;
 use crate::pane_grid;
-use crate::{Clipboard, Element, Hasher, Layout, Point, Rectangle, Size};
+use crate::{
+    Clipboard, Element, Hasher, Layout, Padding, Point, Rectangle, Size,
+};
 
 /// The title bar of a [`Pane`].
 ///
@@ -11,7 +13,7 @@ use crate::{Clipboard, Element, Hasher, Layout, Point, Rectangle, Size};
 pub struct TitleBar<'a, Message, Renderer: pane_grid::Renderer> {
     content: Element<'a, Message, Renderer>,
     controls: Option<Element<'a, Message, Renderer>>,
-    padding: u16,
+    padding: Padding,
     always_show_controls: bool,
     style: <Renderer as container::Renderer>::Style,
 }
@@ -28,7 +30,7 @@ where
         Self {
             content: content.into(),
             controls: None,
-            padding: 0,
+            padding: Padding::ZERO,
             always_show_controls: false,
             style: Default::default(),
         }
@@ -43,9 +45,14 @@ where
         self
     }
 
-    /// Sets the padding of the [`TitleBar`].
+    /// Sets the [`Padding`] of the [`TitleBar`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// TitleBar::new(/*...*/).padding(20);              // 20px on all sides
+    /// TitleBar::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// TitleBar::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -161,8 +168,7 @@ where
         renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let padding = f32::from(self.padding);
+        let limits = limits.pad(self.padding);
-        let limits = limits.pad(padding);
         let max_size = limits.max();
 
         let title_layout = self
@@ -192,9 +198,12 @@ where
             )
         };
 
-        node.move_to(Point::new(padding, padding));
+        node.move_to(Point::new(
+            self.padding.left.into(),
+            self.padding.top.into(),
+        ));
 
-        layout::Node::with_children(node.size().pad(padding), vec![node])
+        layout::Node::with_children(node.size().pad(self.padding), vec![node])
     }
 
     pub(crate) fn on_event(

native/src/widget/pick_list.rs

@@ -8,7 +8,8 @@ use crate::scrollable;
 use crate::text;
 use crate::touch;
 use crate::{
-    Clipboard, Element, Hasher, Layout, Length, Point, Rectangle, Size, Widget,
+    Clipboard, Element, Hasher, Layout, Length, Padding, Point, Rectangle,
+    Size, Widget,
 };
 use std::borrow::Cow;
 
@@ -26,7 +27,7 @@ where
     options: Cow<'a, [T]>,
     selected: Option<T>,
     width: Length,
-    padding: u16,
+    padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
     style: <Renderer as self::Renderer>::Style,
@@ -96,9 +97,14 @@ where
         self
     }
 
-    /// Sets the padding of the [`PickList`].
+    /// Sets the [`Padding`] of the [`PickList`].
-    pub fn padding(mut self, padding: u16) -> Self {
+    ///```ignore
-        self.padding = padding;
+    /// PickList::new(/*...*/).padding(20);              // 20px on all sides
+    /// PickList::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// PickList::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -150,7 +156,7 @@ where
         let limits = limits
             .width(self.width)
             .height(Length::Shrink)
-            .pad(f32::from(self.padding));
+            .pad(self.padding);
 
         let text_size = self.text_size.unwrap_or(renderer.default_size());
 
@@ -179,11 +185,11 @@ where
             let intrinsic = Size::new(
                 max_width as f32
                     + f32::from(text_size)
-                    + f32::from(self.padding),
+                    + f32::from(self.padding.left),
                 f32::from(text_size),
             );
 
-            limits.resolve(intrinsic).pad(f32::from(self.padding))
+            limits.resolve(intrinsic).pad(self.padding)
         };
 
         layout::Node::new(size)
@@ -308,7 +314,7 @@ where
 /// [renderer]: crate::renderer
 pub trait Renderer: text::Renderer + menu::Renderer {
     /// The default padding of a [`PickList`].
-    const DEFAULT_PADDING: u16;
+    const DEFAULT_PADDING: Padding;
 
     /// The [`PickList`] style supported by this renderer.
     type Style: Default;
@@ -324,7 +330,7 @@ pub trait Renderer: text::Renderer + menu::Renderer {
         bounds: Rectangle,
         cursor_position: Point,
         selected: Option<String>,
-        padding: u16,
+        padding: Padding,
         text_size: u16,
         font: Self::Font,
         style: &<Self as Renderer>::Style,

native/src/widget/row.rs

@@ -3,7 +3,8 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Align, Clipboard, Element, Hasher, Layout, Length, Point, Rectangle, Widget,
+    Align, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
+    Rectangle, Widget,
 };
 
 use std::hash::Hash;
@@ -13,7 +14,7 @@ use std::u32;
 #[allow(missing_debug_implementations)]
 pub struct Row<'a, Message, Renderer> {
     spacing: u16,
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -34,7 +35,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     ) -> Self {
         Row {
             spacing: 0,
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -54,9 +55,14 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
         self
     }
 
-    /// Sets the padding of the [`Row`].
+    /// Sets the [`Padding`] of the [`Row`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// Row::new(/*...*/).padding(20);              // 20px on all sides
+    /// Row::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Row::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -128,7 +134,7 @@ where
             layout::flex::Axis::Horizontal,
             renderer,
             &limits,
-            self.padding as f32,
+            self.padding,
             self.spacing as f32,
             self.align_items,
             &self.children,

native/src/widget/scrollable.rs

@@ -6,7 +6,7 @@ use crate::mouse;
 use crate::overlay;
 use crate::touch;
 use crate::{
-    Align, Clipboard, Column, Element, Hasher, Layout, Length, Point,
+    Align, Clipboard, Column, Element, Hasher, Layout, Length, Padding, Point,
     Rectangle, Size, Vector, Widget,
 };
 
@@ -51,9 +51,14 @@ impl<'a, Message, Renderer: self::Renderer> Scrollable<'a, Message, Renderer> {
         self
     }
 
-    /// Sets the padding of the [`Scrollable`].
+    /// Sets the [`Padding`] of the [`Scrollable`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.content = self.content.padding(units);
+    /// Scrollable::new(/*...*/).padding(20);              // 20px on all sides
+    /// Scrollable::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Scrollable::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.content = self.content.padding(padding);
         self
     }
 

native/src/widget/text_input.rs

@@ -18,7 +18,8 @@ use crate::mouse::{self, click};
 use crate::text;
 use crate::touch;
 use crate::{
-    Clipboard, Element, Hasher, Layout, Length, Point, Rectangle, Size, Widget,
+    Clipboard, Element, Hasher, Layout, Length, Padding, Point, Rectangle,
+    Size, Widget,
 };
 
 use std::u32;
@@ -56,7 +57,7 @@ pub struct TextInput<'a, Message, Renderer: self::Renderer> {
     font: Renderer::Font,
     width: Length,
     max_width: u32,
-    padding: u16,
+    padding: Padding,
     size: Option<u16>,
     on_change: Box<dyn Fn(String) -> Message>,
     on_submit: Option<Message>,
@@ -92,7 +93,7 @@ where
             font: Default::default(),
             width: Length::Fill,
             max_width: u32::MAX,
-            padding: 0,
+            padding: Padding::ZERO,
             size: None,
             on_change: Box::new(on_change),
             on_submit: None,
@@ -126,9 +127,14 @@ where
         self
     }
 
-    /// Sets the padding of the [`TextInput`].
+    /// Sets the [`Padding`] of the [`TextInput`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// TextInput::new(/*...*/).padding(20);              // 20px on all sides
+    /// TextInput::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// TextInput::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -223,19 +229,21 @@ where
         renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
-        let padding = self.padding as f32;
         let text_size = self.size.unwrap_or(renderer.default_size());
 
         let limits = limits
-            .pad(padding)
+            .pad(self.padding)
             .width(self.width)
             .max_width(self.max_width)
             .height(Length::Units(text_size));
 
         let mut text = layout::Node::new(limits.resolve(Size::ZERO));
-        text.move_to(Point::new(padding, padding));
+        text.move_to(Point::new(
+            self.padding.left.into(),
+            self.padding.top.into(),
+        ));
 
-        layout::Node::with_children(text.size().pad(padding), vec![text])
+        layout::Node::with_children(text.size().pad(self.padding), vec![text])
     }
 
     fn on_event(

web/src/css.rs

@@ -1,5 +1,5 @@
 //! Style your widgets.
-use crate::{bumpalo, Align, Background, Color, Length};
+use crate::{bumpalo, Align, Background, Color, Length, Padding};
 
 use std::collections::BTreeMap;
 
@@ -12,9 +12,6 @@ pub enum Rule {
     /// Container with horizonal distribution
     Row,
 
-    /// Padding of the container
-    Padding(u16),
-
     /// Spacing between elements
     Spacing(u16),
 }
@@ -25,7 +22,6 @@ impl Rule {
         match self {
             Rule::Column => String::from("c"),
             Rule::Row => String::from("r"),
-            Rule::Padding(padding) => format!("p-{}", padding),
             Rule::Spacing(spacing) => format!("s-{}", spacing),
         }
     }
@@ -45,13 +41,6 @@ impl Rule {
 
                 bumpalo::format!(in bump, ".{} {}", class, body).into_bump_str()
             }
-            Rule::Padding(padding) => bumpalo::format!(
-                in bump,
-                ".{} {{ box-sizing: border-box; padding: {}px }}",
-                class,
-                padding
-            )
-            .into_bump_str(),
             Rule::Spacing(spacing) => bumpalo::format!(
                 in bump,
                 ".c.{} > * {{ margin-bottom: {}px }} \
@@ -170,3 +159,13 @@ pub fn align(align: Align) -> &'static str {
         Align::End => "flex-end",
     }
 }
+
+/// Returns the style value for the given [`Padding`].
+///
+/// [`Padding`]: struct.Padding.html
+pub fn padding(padding: Padding) -> String {
+    format!(
+        "{}px {}px {}px {}px",
+        padding.top, padding.right, padding.bottom, padding.left
+    )
+}

web/src/lib.rs

@@ -75,7 +75,7 @@ pub use element::Element;
 pub use hasher::Hasher;
 pub use iced_core::{
     keyboard, mouse, Align, Background, Color, Font, HorizontalAlignment,
-    Length, Point, Rectangle, Size, Vector, VerticalAlignment,
+    Length, Padding, Point, Rectangle, Size, Vector, VerticalAlignment,
 };
 pub use iced_futures::{executor, futures, Command};
 pub use subscription::Subscription;

web/src/widget/button.rs

@@ -1,7 +1,7 @@
 //! Allow your users to perform actions by pressing a button.
 //!
 //! A [`Button`] has some local [`State`].
-use crate::{css, Background, Bus, Css, Element, Length, Widget};
+use crate::{css, Background, Bus, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::button::{Style, StyleSheet};
 
@@ -30,7 +30,7 @@ pub struct Button<'a, Message> {
     min_width: u32,
     #[allow(dead_code)]
     min_height: u32,
-    padding: u16,
+    padding: Padding,
     style: Box<dyn StyleSheet>,
 }
 
@@ -48,7 +48,7 @@ impl<'a, Message> Button<'a, Message> {
             height: Length::Shrink,
             min_width: 0,
             min_height: 0,
-            padding: 5,
+            padding: Padding::new(5),
             style: Default::default(),
         }
     }
@@ -77,9 +77,14 @@ impl<'a, Message> Button<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Button`].
+    /// Sets the [`Padding`] of the [`Button`].
-    pub fn padding(mut self, padding: u16) -> Self {
+    ///```ignore
-        self.padding = padding;
+    /// Button::new(/*...*/).padding(20);              // 20px on all sides
+    /// Button::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Button::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -122,9 +127,6 @@ where
         // TODO: State-based styling
         let style = self.style.active();
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         let background = match style.background {
             None => String::from("none"),
             Some(background) => match background {
@@ -132,25 +134,19 @@ where
             },
         };
 
-        let class = {
-            use dodrio::bumpalo::collections::String;
-
-            String::from_str_in(&padding_class, bump).into_bump_str()
-        };
-
         let mut node = button(bump)
-            .attr("class", class)
             .attr(
                 "style",
                 bumpalo::format!(
                     in bump,
                     "background: {}; border-radius: {}px; width:{}; \
-                    min-width: {}; color: {}",
+                    min-width: {}; color: {}; padding: {}",
                     background,
                     style.border_radius,
                     css::length(self.width),
                     css::min_length(self.min_width),
-                    css::color(style.text_color)
+                    css::color(style.text_color),
+                    css::padding(self.padding)
                 )
                 .into_bump_str(),
             )

web/src/widget/column.rs

@@ -1,4 +1,4 @@
-use crate::{css, Align, Bus, Css, Element, Length, Widget};
+use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -9,7 +9,7 @@ use std::u32;
 #[allow(missing_debug_implementations)]
 pub struct Column<'a, Message> {
     spacing: u16,
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -28,7 +28,7 @@ impl<'a, Message> Column<'a, Message> {
     pub fn with_children(children: Vec<Element<'a, Message>>) -> Self {
         Column {
             spacing: 0,
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Fill,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -48,9 +48,14 @@ impl<'a, Message> Column<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Column`].
+    /// Sets the [`Padding`] of the [`Column`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// Column::new(/*...*/).padding(20);              // 20px on all sides
+    /// Column::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Column::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -114,23 +119,21 @@ impl<'a, Message> Widget<Message> for Column<'a, Message> {
         let spacing_class =
             style_sheet.insert(bump, css::Rule::Spacing(self.spacing));
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         // TODO: Complete styling
         div(bump)
             .attr(
                 "class",
-                bumpalo::format!(in bump, "{} {} {}", column_class, spacing_class, padding_class)
+                bumpalo::format!(in bump, "{} {}", column_class, spacing_class)
                     .into_bump_str(),
             )
             .attr("style", bumpalo::format!(
                     in bump,
-                    "width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}",
+                    "width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}",
                     css::length(self.width),
                     css::length(self.height),
                     css::max_length(self.max_width),
                     css::max_length(self.max_height),
+                    css::padding(self.padding),
                     css::align(self.align_items)
                 ).into_bump_str()
             )

web/src/widget/container.rs

@@ -1,5 +1,5 @@
 //! Decorate content and apply alignment.
-use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Widget};
+use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::container::{Style, StyleSheet};
 
@@ -8,7 +8,7 @@ pub use iced_style::container::{Style, StyleSheet};
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
 pub struct Container<'a, Message> {
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -29,7 +29,7 @@ impl<'a, Message> Container<'a, Message> {
         use std::u32;
 
         Container {
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -41,9 +41,14 @@ impl<'a, Message> Container<'a, Message> {
         }
     }
 
-    /// Sets the padding of the [`Container`].
+    /// Sets the [`Padding`] of the [`Container`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// Container::new(/*...*/).padding(20);              // 20px on all sides
+    /// Container::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Container::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -106,24 +111,22 @@ where
 
         let column_class = style_sheet.insert(bump, css::Rule::Column);
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         let style = self.style_sheet.style();
 
         let node = div(bump)
             .attr(
                 "class",
-                bumpalo::format!(in bump, "{} {}", column_class, padding_class).into_bump_str(),
+                bumpalo::format!(in bump, "{}", column_class).into_bump_str(),
             )
             .attr(
                 "style",
                 bumpalo::format!(
                     in bump,
-                    "width: {}; height: {}; max-width: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px",
+                    "width: {}; height: {}; max-width: {}; padding: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px",
                     css::length(self.width),
                     css::length(self.height),
                     css::max_length(self.max_width),
+                    css::padding(self.padding),
                     css::align(self.horizontal_alignment),
                     css::align(self.vertical_alignment),
                     style.background.map(css::background).unwrap_or(String::from("initial")),

web/src/widget/row.rs

@@ -1,4 +1,4 @@
-use crate::{css, Align, Bus, Css, Element, Length, Widget};
+use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -9,7 +9,7 @@ use std::u32;
 #[allow(missing_debug_implementations)]
 pub struct Row<'a, Message> {
     spacing: u16,
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -28,7 +28,7 @@ impl<'a, Message> Row<'a, Message> {
     pub fn with_children(children: Vec<Element<'a, Message>>) -> Self {
         Row {
             spacing: 0,
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Fill,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -48,9 +48,14 @@ impl<'a, Message> Row<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Row`].
+    /// Sets the [`Padding`] of the [`Row`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// Row::new(/*...*/).padding(20);              // 20px on all sides
+    /// Row::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Row::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -114,23 +119,21 @@ impl<'a, Message> Widget<Message> for Row<'a, Message> {
         let spacing_class =
             style_sheet.insert(bump, css::Rule::Spacing(self.spacing));
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         // TODO: Complete styling
         div(bump)
             .attr(
                 "class",
-                bumpalo::format!(in bump, "{} {} {}", row_class, spacing_class, padding_class)
+                bumpalo::format!(in bump, "{} {}", row_class, spacing_class)
                     .into_bump_str(),
             )
             .attr("style", bumpalo::format!(
                     in bump,
-                    "width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}",
+                    "width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}",
                     css::length(self.width),
                     css::length(self.height),
                     css::max_length(self.max_width),
                     css::max_length(self.max_height),
+                    css::padding(self.padding),
                     css::align(self.align_items)
                 ).into_bump_str()
             )

web/src/widget/scrollable.rs

@@ -1,5 +1,7 @@
 //! Navigate an endless amount of content with a scrollbar.
-use crate::{bumpalo, css, Align, Bus, Column, Css, Element, Length, Widget};
+use crate::{
+    bumpalo, css, Align, Bus, Column, Css, Element, Length, Padding, Widget,
+};
 
 pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
 
@@ -39,9 +41,14 @@ impl<'a, Message> Scrollable<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Scrollable`].
+    /// Sets the [`Padding`] of the [`Scrollable`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.content = self.content.padding(units);
+    /// Scrollable::new(/*...*/).padding(20);              // 20px on all sides
+    /// Scrollable::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Scrollable::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```    
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.content = self.content.padding(padding);
         self
     }
 

web/src/widget/text_input.rs

@@ -1,7 +1,7 @@
 //! Display fields that can be filled with text.
 //!
 //! A [`TextInput`] has some local [`State`].
-use crate::{bumpalo, css, Bus, Css, Element, Length, Widget};
+use crate::{bumpalo, css, Bus, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::text_input::{Style, StyleSheet};
 
@@ -35,7 +35,7 @@ pub struct TextInput<'a, Message> {
     is_secure: bool,
     width: Length,
     max_width: u32,
-    padding: u16,
+    padding: Padding,
     size: Option<u16>,
     on_change: Rc<Box<dyn Fn(String) -> Message>>,
     on_submit: Option<Message>,
@@ -66,7 +66,7 @@ impl<'a, Message> TextInput<'a, Message> {
             is_secure: false,
             width: Length::Fill,
             max_width: u32::MAX,
-            padding: 0,
+            padding: Padding::ZERO,
             size: None,
             on_change: Rc::new(Box::new(on_change)),
             on_submit: None,
@@ -92,9 +92,14 @@ impl<'a, Message> TextInput<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`TextInput`].
+    /// Sets the [`Padding`] of the [`TextInput`].
-    pub fn padding(mut self, units: u16) -> Self {
+    ///```ignore
-        self.padding = units;
+    /// TextInput::new(/*...*/).padding(20);              // 20px on all sides
+    /// TextInput::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// TextInput::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -131,15 +136,6 @@ where
         use dodrio::builder::*;
         use wasm_bindgen::JsCast;
 
-        let class = {
-            use dodrio::bumpalo::collections::String;
-
-            let padding_class =
-                style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
-            String::from_str_in(&padding_class, bump).into_bump_str()
-        };
-
         let placeholder = {
             use dodrio::bumpalo::collections::String;
 
@@ -159,16 +155,16 @@ where
         let style = self.style_sheet.active();
 
         input(bump)
-            .attr("class", class)
             .attr(
                 "style",
                 bumpalo::format!(
                     in bump,
-                    "width: {}; max-width: {}; font-size: {}px; \
+                    "width: {}; max-width: {}; padding: {}; font-size: {}px; \
                     background: {}; border-width: {}px; border-color: {}; \
                     border-radius: {}px; color: {}",
                     css::length(self.width),
                     css::max_length(self.max_width),
+                    css::padding(self.padding),
                     self.size.unwrap_or(20),
                     css::background(style.background),
                     style.border_width,