diff --git a/src/Elements/BodyComponents/MjSpacer.php b/src/Elements/BodyComponents/MjSpacer.php
new file mode 100644
index 0000000..228f462
--- /dev/null
+++ b/src/Elements/BodyComponents/MjSpacer.php
@@ -0,0 +1,111 @@
+>
+ */
+ protected array $allowedAttributes = [
+ 'container-background-color' => [
+ 'unit' => 'color',
+ 'type' => 'color',
+ 'description' => 'inner element background color',
+ 'default_value' => '',
+ ],
+ 'css-class' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'description' => 'class name added to root HTML element',
+ 'default_value' => '',
+ ],
+ 'height' => [
+ 'unit' => 'px',
+ 'type' => 'measure',
+ 'description' => 'spacer height',
+ 'default_value' => '20px',
+ ],
+ 'padding' => [
+ 'unit' => 'px',
+ 'type' => 'measure',
+ 'description' => 'supports up to 4 parameters',
+ 'default_value' => '',
+ ],
+ 'padding-top' => [
+ 'unit' => 'px',
+ 'type' => 'measure',
+ 'description' => 'top offset',
+ 'default_value' => '',
+ ],
+ 'padding-bottom' => [
+ 'unit' => 'px',
+ 'type' => 'measure',
+ 'description' => 'bottom offset',
+ 'default_value' => '',
+ ],
+ 'padding-left' => [
+ 'unit' => 'px',
+ 'type' => 'measure',
+ 'description' => 'left offset',
+ 'default_value' => '',
+ ],
+ 'padding-right' => [
+ 'unit' => 'px',
+ 'type' => 'measure',
+ 'description' => 'right offset',
+ 'default_value' => '',
+ ],
+ ];
+
+ protected array $defaultAttributes = [
+ 'height' => '20px',
+ ];
+
+ public function render(): string
+ {
+ $divAttributes = $this->getHtmlAttributes([
+ 'style' => 'div',
+ ]);
+
+ return "
";
+ }
+
+ /**
+ * @return array>
+ */
+ public function getStyles(): array
+ {
+ return [
+ 'div' => [
+ 'height' => $this->getAttribute('height'),
+ 'line-height' => $this->getAttribute('height'),
+ ],
+ ];
+ }
+}
diff --git a/tests/Unit/Elements/BodyComponents/MjSpacerTest.php b/tests/Unit/Elements/BodyComponents/MjSpacerTest.php
new file mode 100644
index 0000000..f4f06c0
--- /dev/null
+++ b/tests/Unit/Elements/BodyComponents/MjSpacerTest.php
@@ -0,0 +1,117 @@
+element = new MjSpacer();
+});
+
+it('is not ending tag', function () {
+ expect($this->element->isEndingTag())->toBe(false);
+});
+
+it('returns the correct component name', function () {
+ expect($this->element->getTagName())->toBe('mj-spacer');
+});
+
+it('returns the correct default attributes', function () {
+ $attributes = [
+ 'height' => '20px',
+ ];
+
+ foreach ($attributes as $key => $value) {
+ expect($this->element->getAttribute($key))->toBe($value);
+ }
+});
+
+it('will throw out of bounds exception if the allowed attribute is not existing', function () {
+ $this->element->getAllowedAttributeData('invalid-attribute');
+})->throws(OutOfBoundsException::class);
+
+it('will return allowed attribute data', function () {
+ $data = $this->element->getAllowedAttributeData('height');
+ expect($data)->toBeArray();
+ expect($data)->toHaveKey('type');
+ expect($data)->toHaveKey('unit');
+});
+
+it('will correctly render a simple spacer', function () {
+ $spacerNode = new MjmlNode(
+ 'mj-spacer',
+ null,
+ null,
+ false,
+ null
+ );
+
+ $factory = new ElementFactory();
+ $mjSpacerElement = $factory->create($spacerNode);
+
+ expect($mjSpacerElement)->toBeInstanceOf(MjSpacer::class);
+
+ $out = $mjSpacerElement->render();
+
+ expect($out)->toContain('toContain('height');
+ expect($out)->toContain('20px');
+ expect($out)->not->toBeEmpty();
+});
+
+it('will correctly render a spacer with custom height', function () {
+ $spacerNode = new MjmlNode(
+ 'mj-spacer',
+ ['height' => '50px'],
+ null,
+ false,
+ null
+ );
+
+ $factory = new ElementFactory();
+ $mjSpacerElement = $factory->create($spacerNode);
+
+ $out = $mjSpacerElement->render();
+
+ expect($out)->toContain('50px');
+ expect($out)->not->toBeEmpty();
+});
+
+it('will correctly render a spacer with small height', function () {
+ $spacerNode = new MjmlNode(
+ 'mj-spacer',
+ ['height' => '10px'],
+ null,
+ false,
+ null
+ );
+
+ $factory = new ElementFactory();
+ $mjSpacerElement = $factory->create($spacerNode);
+
+ $out = $mjSpacerElement->render();
+
+ expect($out)->toContain('10px');
+ expect($out)->not->toBeEmpty();
+});
+
+it('will correctly render a spacer with large height', function () {
+ $spacerNode = new MjmlNode(
+ 'mj-spacer',
+ ['height' => '100px'],
+ null,
+ false,
+ null
+ );
+
+ $factory = new ElementFactory();
+ $mjSpacerElement = $factory->create($spacerNode);
+
+ $out = $mjSpacerElement->render();
+
+ expect($out)->toContain('100px');
+ expect($out)->not->toBeEmpty();
+});