Remove spaces between Lightning-card and border

csshtmllightninglightning-experiencelightning-web-components

I want to remove space between "inner_card" and "my-card-child". I tried it with margin and padding between those card and div tag. but i'm not getting solution for this.

enter image description here

I wan to expand that contact card to the border top, right and left
can anyone help me to find the solution.

<template>
  <lightning-card class="my-card">
<article class="slds-card">
 <template if:true={contacts.data}>
              <template for:each={contacts.data} for:item="con">
                        <div class="my-card-child"  key={con.id}  onclick={navigateToNewContactPage} data-id={con.Id} >
                          <lightning-card> 
                            <lightning-card class="inner_card" title="Contact" icon-name="standard:account">
                            </lightning-card>

                              <a href="#"> <h3>{con.Name}</h3> </a> <br>

                                  Title: {con.Title}<br>

                                  Phone: {con.Phone} <br>

                                  Email: {con.Email} 
                                </lightning-card>
                </div>
              </template>
          </template>
        
          <template if:true={contacts.error}>
              <p>{contacts.error}</p>
          </template>
</article>
  </lightning-card> 
</template>

CSS:

.my-card {

    border: 2px solid #ccc;
    border-radius: 25px;
    padding: 20px;
    display: flex;
}

.my-card-child {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin: 12px;
    display: flex;
    float: left;
}


.inner_card {
    --sds-c-card-color-background: #a2a8e2;
}

Best Answer

Looking at the HTML structure, you have used lightning-card in an incorrect way.

In the code, you have 3 lightning-card and a div with slds-card, only one is sufficient to render a card, as card comes with a slot for header, body and optionally a header.

If you use the slds cards in a right way, you will need very limited code. below is a sample code:

<template>
    <div class="main-container">
        <template if:true={contacts}>
            <lightning-layout multiple-rows="true">
                <template for:each={contacts} for:item="con">
                    <lightning-layout-item padding="around-small" key={con.id} size="6">
                        <div class="my-card-child" data-id={con.Id}>
                            <lightning-card class="inner_card">

                                <h3 slot="title" class="card-header">
                                    <lightning-icon icon-name="standard:account" 
                                      size="small"></lightning-icon>
                                    Contact
                                </h3>
                                <div class="slds-p-horizontal_small">
                                    <a href="#">
                                        <h3>{con.Name}</h3>
                                    </a>
                                    <p>Title: {con.Title}</p>
                                    <p>Phone: {con.Phone}</p>
                                    <p>Email: {con.Email}</p>
                                </div>
                            </lightning-card>
                        </div>
                    </lightning-layout-item>
                </template>
            </lightning-layout>
        </template>
    </div>
</template>

Checkout the code and output in the webcomponents.dev playground.

Some tips:

  1. For layout, lightning-layout is super helpful.
  2. Try using block elements like p or div instead of a br.
  3. Use standard SLDS utility classes instead of custom margin, padding, etc
Related Topic