Gap between the elements in Lightning component when it renders - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
Md Ghaus AliMd Ghaus Ali 

Gap between the elements in Lightning component when it renders

Hi Pros,

It might sound like a silly question but I came across something while creating a Lightning component. Please have a look into my component and help me clear my doubts that is mentioned below.

Below is my component code:-
<aura:component controller="ContactListController">
    <aura:attribute name="contactList" type="list"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInitialization}"/>
    <div class="slds-p-around_medium">
    <aura:iteration items="{!v.contactList}" var="singleContact">
        <lightning:card footer="{!singleContact.Phone}" title="{!singleContact.Name}" 
                        iconName="standard:contact_list">
            <b>First Name</b> : {!singleContact.FirstName}<br></br>
            <b>Last Name</b> : {!singleContact.LastName}<br></br>
            <b>Email</b> : {!singleContact.Email}
        </lightning:card>   
    </aura:iteration>
    </div>
</aura:component>

Now if you see in the above code, I have put the <div> tag for padding outside the <aura:iteration> and I get the result like this:-
Less SpacingAs you can see there is less spacing between two lightning cards.But when i put my <div> tag inside the <aura:iteration> then there is more space between the lightning cards.

More Spacing 
I am not able to get why this is happening so. Please healp me out!!!

Thanks in Advance,
Ali
Best Answer chosen by Md Ghaus Ali
Amnon KruviAmnon Kruvi
Hi Ali, 

It's because of the CSS class slds-p-around_medium. This adds padding around the div. If that div is inside the iteration, the padding repeats itself. If it's outside the iteration, you only get one padded div. 

All Answers

Amnon KruviAmnon Kruvi
Hi Ali, 

It's because of the CSS class slds-p-around_medium. This adds padding around the div. If that div is inside the iteration, the padding repeats itself. If it's outside the iteration, you only get one padded div. 
This was selected as the best answer
Sudeep DubeSudeep Dube
Hi Md Ghaus Ali , 

This gap due the classes added to div inside the card element, You cal self identify by using inspect in browser and and see the element and padding and margin on elements 

Thansk!