# Oberer Abstand einer Einkaufswelt

**URL:** <https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572>\
**Category:** Themes & Design\
**Created:** [27. April 2015 um 22:54 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572 "2015-04-27T22:54:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jox](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jox](https://forum.shopware.com/u/jox)\
**Post date:** [27. April 2015 um 22:54 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/1 "2015-04-27T22:54:55Z")

</div>

Ich muß auf der Startseite verschiedene Einkaufswelten erstellen. 1. Mit Banner-Slider und Banner (Resizable) 2. Mit Artikel (Resizable) 3. Html-Element (Masonry) Die Elemente kann ich nicht in eine Einkaufswelt packen, da ich das Html-Element unbedingt in Masonry-Effekt machen, damit man die Schrift bei Mobilgeräten überhaupt noch lesen kann. Die anderen Elemente muß ich in Resizable machen, damit sie sich anpassen können. Wenn ich nun eine Einkaufswelt unter die andere setze, liegen diese Stoß auf Stoß aufeinander. Ich habe also keinen Abstand. Wie kann ich einen Abstand (z. B. 10px) zu den einzelnen Einkaufswelten herstellen?

---

<div class="post-metadata">

**Author:** ![artep](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@artep](https://forum.shopware.com/u/artep)\
**Post date:** [23. Mai 2015 um 16:38 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/2 "2015-05-23T16:38:06Z")

</div>

Hi, hast Du das schon gelöst? Ich habe auch das Problem.

---

<div class="post-metadata">

**Author:** ![jox](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jox](https://forum.shopware.com/u/jox)\
**Post date:** [23. Mai 2015 um 17:22 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/3 "2015-05-23T17:22:43Z")

</div>

Hallo Petra, ich habe mir jetzt so beholfen, indem ich eine zusätzliche sogenannte ‚Leere Einkaufswelt‘ mit Zeilenhöhe 10px jeweils dazwischen geschoben habe.

---

<div class="post-metadata">

**Author:** ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)\
**Post date:** [23. Mai 2015 um 21:51 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/4 "2015-05-23T21:51:33Z")

</div>

Ich mag mich täuschen, aber so wie es im Quelltext aussieht, ist jede Einkaufswelt in einem

mit der Klasse „emotion–wrapper“ gekapselt. Wenn dem so ist, einfach der CSS-Class „emotion–wrapper“ ein „margin-bottom: 10px“ verpassen ,also einen unteren Abstand. `.emotion--wrapper { .unitize(margin-bottom, 10); }`

---

<div class="post-metadata">

**Author:** ![jox](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jox](https://forum.shopware.com/u/jox)\
**Post date:** [23. Mai 2015 um 23:24 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/5 "2015-05-23T23:24:53Z")

</div>

Hallo Carsten, hattest recht. Das ist natürlich die elegantere Lösung. Habe jetzt im eigenen Theme in der emotion.less folgendes eingetragen: [quote] // Emotion wrapper .emotion–wrapper { .unitize(margin-bottom, 10); }[/quote] Somit konnte ich die leeren Einkaufswelten wieder löschen. Vielen Dank für den Tipp!

---

<div class="post-metadata">

**Author:** ![artep](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@artep](https://forum.shopware.com/u/artep)\
**Post date:** [24. Mai 2015 um 01:19 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/6 "2015-05-24T01:19:07Z")

</div>

Danke an Euch!! 😉

---

<div class="post-metadata">

**Author:** ![topspeed](https://avatars.discourse-cdn.com/v4/letter/t/45deac/32.png) [@topspeed](https://forum.shopware.com/u/topspeed)\
**Post date:** [28. Mai 2015 um 16:17 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/7 "2015-05-28T16:17:58Z")

</div>

Hallo jox, kannst Du bitte einem “outsider”, wie ich, etwas genauer erklären, wie Du das gemacht hast. Wo, welchen Ordner und welche Datei hast Du mit diesem Inhalt angelegt? Danke!

---

<div class="post-metadata">

**Author:** ![mee](https://avatars.discourse-cdn.com/v4/letter/m/c0e974/32.png) [@mee](https://forum.shopware.com/u/mee)\
**Post date:** [21. Juni 2021 um 23:36 UTC](https://forum.shopware.com/t/oberer-abstand-einer-einkaufswelt/26572/8 "2021-06-21T23:36:14Z")

</div>

> [@sonic](#):
>
> .emotion–wrapper { .unitize(margin-bottom, 10); }

@sonic das sollte doch eigentlich bei jeden funktionieren oder, verstehe einfach nicht warum das bei mir nicht klappt bei dem gleichen problem