Merge pull request #630 from blefevre/asymmetric-padding

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,107 @@
+/// An amount of space to pad for each side of a box
+///
+/// You can leverage the `From` trait to build [`Padding`] conveniently:
+///
+/// ```
+/// # use iced_core::Padding;
+/// #
+/// let padding = Padding::from(20);              // 20px on all sides
+/// let padding = Padding::from([10, 20]);        // top/bottom, left/right
+/// let padding = Padding::from([5, 10, 15, 20]); // top, right, bottom, left
+/// ```
+///
+/// Normally, the `padding` method of a widget will ask for an `Into<Padding>`,
+/// so you can easily write:
+///
+/// ```
+/// # use iced_core::Padding;
+/// #
+/// # struct Widget;
+/// #
+/// impl Widget {
+///     # pub fn new() -> Self { Self }
+///     #
+///     pub fn padding(mut self, padding: impl Into<Padding>) -> Self {
+///         // ...
+///         self
+///     }
+/// }
+///
+/// let widget = Widget::new().padding(20);              // 20px on all sides
+/// let widget = Widget::new().padding([10, 20]);        // top/bottom, left/right
+/// let widget = Widget::new().padding([5, 10, 15, 20]); // top, right, bottom, left
+/// ```
+#[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,
+        }
+    }
+
+    /// Returns the total amount of vertical [`Padding`].
+    pub fn vertical(self) -> u16 {
+        self.top + self.bottom
+    }
+
+    /// Returns the total amount of horizontal [`Padding`].
+    pub fn horizontal(self) -> u16 {
+        self.left + self.right
+    }
+}
+
+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.horizontal() as f32,
-            height: self.height + padding * 2.0,
+            height: self.height + padding.vertical() 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.vertical()) 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.vertical()),
             };
 
             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,7 @@ 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.horizontal()),
                 y: bounds.center_y(),
                 ..bounds
             },
@@ -74,7 +75,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
                         },

graphics/src/widget/tooltip.rs

@@ -5,7 +5,7 @@ use crate::{Primitive, Renderer, Vector};
 
 use iced_native::container;
 use iced_native::layout::{self, Layout};
-use iced_native::{Element, Point, Rectangle, Size, Text};
+use iced_native::{Element, Padding, Point, Rectangle, Size, Text};
 
 /// An element decorating some content.
 ///
@@ -49,7 +49,6 @@ where
             use iced_native::Widget;
 
             let gap = f32::from(gap);
-            let padding = f32::from(padding);
             let style = style_sheet.style();
 
             let defaults = Defaults {
@@ -62,9 +61,10 @@ where
                 tooltip,
                 self,
                 &layout::Limits::new(Size::ZERO, viewport.size())
-                    .pad(f32::from(padding)),
+                    .pad(Padding::new(padding)),
             );
 
+            let padding = f32::from(padding);
             let text_bounds = text_layout.bounds();
             let x_center = bounds.x + (bounds.width - text_bounds.width) / 2.0;
             let y_center =

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.horizontal() as f32,
+            padding.vertical() 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,9 @@ where
         self
     }
 
-    /// Sets the padding of the [`Menu`].
+    /// Sets the [`Padding`] of the [`Menu`].
-    pub fn padding(mut self, padding: u16) -> Self {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = padding;
+        self.padding = padding.into();
         self
     }
 
@@ -261,7 +261,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 +294,7 @@ where
         let size = {
             let intrinsic = Size::new(
                 0.0,
-                f32::from(text_size + self.padding * 2)
+                f32::from(text_size + self.padding.vertical())
                     * self.options.len() as f32,
             );
 
@@ -345,7 +345,7 @@ where
 
                     *self.hovered_option = Some(
                         ((cursor_position.y - bounds.y)
-                            / f32::from(text_size + self.padding * 2))
+                            / f32::from(text_size + self.padding.vertical()))
                             as usize,
                     );
                 }
@@ -359,7 +359,7 @@ where
 
                     *self.hovered_option = Some(
                         ((cursor_position.y - bounds.y)
-                            / f32::from(text_size + self.padding * 2))
+                            / f32::from(text_size + self.padding.vertical()))
                             as usize,
                     );
 
@@ -430,7 +430,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,9 @@ where
         self
     }
 
-    /// Sets the padding of the [`Button`].
+    /// Sets the [`Padding`] of the [`Button`].
-    pub fn padding(mut self, padding: u16) -> Self {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = padding;
+        self.padding = padding.into();
         self
     }
 
@@ -140,18 +141,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 +261,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -129,7 +130,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,9 @@ where
         }
     }
 
-    /// Sets the padding of the [`Container`].
+    /// Sets the [`Padding`] of the [`Container`].
-    pub fn padding(mut self, units: u16) -> Self {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -127,23 +128,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,9 @@ where
         self
     }
 
-    /// Sets the padding of the [`TitleBar`].
+    /// Sets the [`Padding`] of the [`TitleBar`].
-    pub fn padding(mut self, units: u16) -> Self {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -161,8 +163,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 +193,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,9 @@ where
         self
     }
 
-    /// Sets the padding of the [`PickList`].
+    /// Sets the [`Padding`] of the [`PickList`].
-    pub fn padding(mut self, padding: u16) -> Self {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = padding;
+        self.padding = padding.into();
         self
     }
 
@@ -150,7 +151,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 +180,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 +309,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 +325,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -128,7 +129,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.content = self.content.padding(units);
+        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,9 @@ where
         self
     }
 
-    /// Sets the padding of the [`TextInput`].
+    /// Sets the [`Padding`] of the [`TextInput`].
-    pub fn padding(mut self, units: u16) -> Self {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -223,19 +224,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = padding;
+        self.padding = padding.into();
         self
     }
 
@@ -122,9 +122,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 +129,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -114,23 +114,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -106,24 +106,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -114,23 +114,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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.content = self.content.padding(units);
+        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,9 @@ 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 {
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
-        self.padding = units;
+        self.padding = padding.into();
         self
     }
 
@@ -126,20 +126,11 @@ where
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<Message>,
-        style_sheet: &mut Css<'b>,
+        _style_sheet: &mut Css<'b>,
     ) -> dodrio::Node<'b> {
         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 +150,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,