Bagaimana untuk mengalih keluar padding di sekeliling widget dalam sempadan?

Question

Gambar pertama adalah apa yang saya ada, gambar kedua adalah apa yang saya ingin capai.

Setakat ini saya menyedari bahawa melumpuhkan kedua-dua tanda kutu (dalam gambar di atas) menyelesaikan masalah, tetapi bagaimanakah saya menulis kod css?

Ini adalah kod yang saya gunakan pada masa ini untuk melaraskan widget mengikut keinginan saya.

span[data-pin-log="pinterest"] {
    overflow: scroll;
    overflow-x: hidden;
}
span[data-pin-log="embed_grid"]::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
span[data-pin-log="embed_grid"]::-webkit-scrollbar-thumb {
    background: #FF0000;
}

#pinterest [class$=_button] {
  display: none !important;
}
#pinterest [class$=_button] {
  display: none !important;
}
#pinterest [class$=_hd] {
display: none !important;
}
body > span[data-pin-log="embed_grid"] {
  border: none;
}

<a data-pin-do="embedBoard" data-pin-board-width="350" data-pin-scale-height="500" data-pin-scale-width="130" href="https://www.pinterest.co.uk/toastedmacarons/rich-boys-city-girls/"></a>
<script async defer src="https://assets.pinterest.com/js/pinit.js"></script>

Jika ia membantu, widget ini ada di sini.

Pengetahuan saya tentang CSS sangat terhad jadi sebarang bantuan amat dihargai. Terima kasih terlebih dahulu :))

Answer 1

Ikuti kod CSS saya:

/* Remove scrollbar */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
    overflow: scroll;
    overflow-x: hidden;
}
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
}

/* Remove border */
body > span[data-pin-log="embed_grid"] {
  border: none;
  padding: 0 !important;
}

/* Remove padding */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
  padding: 0;
}

/* Hide header (pinterest logo) */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]:first-child {
  display: none;
}

/* Hide follow button */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_user_ft"]:last-child {
  display: none;
}

Contoh penuh di Codepen