Add padding to slide for Swiper-CodePudding

I'd like to add padding to the slide, Swiper offers the parameter spaceBetween for outside the slide ( the wrapper gap ). Now I need padding inside the slide, I've tried adding the padding to .swiper-slide but it broke the whole structure of the swiper.

const swiper = new Swiper('.swiper', {
  loop: true,
  slidesPerView: 2,
  spaceBetween: 30
});

.swiper {
  width: 300px;
  height: 150px;
  background-color: gray;
}

.swiper-slide {
  padding: 15px;
  background-color: green;
  color: white;
}

<div >
  <div >
    <div >Slide 1</div>
    <div >Slide 2</div>
    <div >Slide 3</div>
  </div>
</div>

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

CodePudding user response：

you should give padding and box-sizing: border-box; to your .swiper-slide do this :

const swiper = new Swiper('.swiper', {
  loop: true,
  slidesPerView: 2,
  spaceBetween: 30
});

.swiper {
  width: 100%;
  height: 150px;
  background-color: gray;
}

.swiper-slide {
  background-color: green;
  position:relative;
  color: white;
  padding:20px;
  box-sizing: border-box;
}
.padding{
  max-width:100%;
background:red;
}
.swiper-wrapper{
  width: 100%;
  height: 100%;
}

<div >
  <div >
    <div >
    <div >Slide 1</div>
    <div>example 1</div>
    <div>example 2</div>
    <div>example 3</div>
    </div>
    <div >Slide 2</div>
    <div >Slide 3</div>
  </div>
</div>

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>