4 files changed, 73 insertions, 2 deletions
diff --git a/web/src/style.rs b/web/src/style.rs
index 2fb8602a..4f72b22c 100644
--- a/web/src/style.rs
+++ b/web/src/style.rs
@@ -139,7 +139,7 @@ pub fn length(length: Length) -> String {
     match length {
         Length::Shrink => String::from("auto"),
         Length::Units(px) => format!("{}px", px),
-        Length::Fill => String::from("100%"),
+        Length::Fill | Length::FillPortion(_) => String::from("100%"),
     }
 }
 
diff --git a/web/src/widget.rs b/web/src/widget.rs
index b0e16692..0ac536bd 100644
--- a/web/src/widget.rs
+++ b/web/src/widget.rs
@@ -28,6 +28,7 @@ mod container;
 mod image;
 mod radio;
 mod row;
+mod space;
 mod text;
 
 #[doc(no_inline)]
@@ -47,6 +48,7 @@ pub use container::Container;
 pub use image::Image;
 pub use radio::Radio;
 pub use row::Row;
+pub use space::Space;
 
 /// A component that displays information and allows interaction.
 ///
diff --git a/web/src/widget/image.rs b/web/src/widget/image.rs
index ed8b7ecf..413b663e 100644
--- a/web/src/widget/image.rs
+++ b/web/src/widget/image.rs
@@ -67,7 +67,7 @@ impl<Message> Widget<Message> for Image {
 
         match self.width {
             Length::Shrink => {}
-            Length::Fill => {
+            Length::Fill | Length::FillPortion(_) => {
                 image = image.attr("width", "100%");
             }
             Length::Units(px) => {
diff --git a/web/src/widget/space.rs b/web/src/widget/space.rs
new file mode 100644
index 00000000..baf4c80b
--- /dev/null
+++ b/web/src/widget/space.rs
@@ -0,0 +1,69 @@
+use crate::{style, Bus, Element, Length, Widget};
+use dodrio::bumpalo;
+
+/// An amount of empty space.
+///
+/// It can be useful if you want to fill some space with nothing.
+#[derive(Debug)]
+pub struct Space {
+    width: Length,
+    height: Length,
+}
+
+impl Space {
+    /// Creates an amount of empty [`Space`] with the given width and height.
+    ///
+    /// [`Space`]: struct.Space.html
+    pub fn new(width: Length, height: Length) -> Self {
+        Space { width, height }
+    }
+
+    /// Creates an amount of horizontal [`Space`].
+    ///
+    /// [`Space`]: struct.Space.html
+    pub fn with_width(width: Length) -> Self {
+        Space {
+            width,
+            height: Length::Shrink,
+        }
+    }
+
+    /// Creates an amount of vertical [`Space`].
+    ///
+    /// [`Space`]: struct.Space.html
+    pub fn with_height(height: Length) -> Self {
+        Space {
+            width: Length::Shrink,
+            height,
+        }
+    }
+}
+
+impl<'a, Message> Widget<Message> for Space {
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        _publish: &Bus<Message>,
+        _style_sheet: &mut style::Sheet<'b>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        let width = style::length(self.width);
+        let height = style::length(self.height);
+
+        let style = bumpalo::format!(
+            in bump,
+            "width: {}; height: {};",
+            width,
+            height
+        );
+
+        div(bump).attr("style", style.into_bump_str()).finish()
+    }
+}
+
+impl<'a, Message> From<Space> for Element<'a, Message> {
+    fn from(space: Space) -> Element<'a, Message> {
+        Element::new(space)
+    }
+}