Html 离子滑块中的填充

对于html、css和ionic中的初学者问题，很抱歉。我对填充有问题

我想要像这样的图像滑块

但用我的密码我得到了这个：

我想在红色框中的文本和图像得到像在第一个图像。我试着用减号填充顶部，用css填充爱奥尼亚，但没有用

这是我的密码：

 <ion-view view-title="Example">
  <ion-content class="padding">
   <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false" auto-play="true" does-continue="true">
          <ion-slide>
              <h3>Favourite</h3>
               <div class="row">
                    <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
                    <span class="row">
                        <img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px;">
                        <div class="col col-50" style="; padding-top:-10px">
                            <h4 class="row">Image One </h4>
                            <div class="row">
                                <img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
                                <h4 class="col col-60" style="padding-top:-10px"> 5.0</h4>
                            </div>
                        </div>
                    </span>
                    <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
                </div>
          </ion-slide>
          <ion-slide>
           <h3>Favourite</h3>
               <div class="row">
                    <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
                    <span class="row">
                        <img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px;">
                        <div class="col col-50" style="; padding-top:-10px">
                            <h4 class="row">Image Two </h4>
                            <div class="row">
                                <img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
                                <h4 class="col col-60"> 5.0</h4>
                            </div>
                        </div>
                    </span>
                    <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
                </div>
          </ion-slide>
          <ion-slide>
          <h3>Favourite</h3>
               <div class="row">
                    <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
                    <span class="row">
                        <img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px;">
                        <div class="col col-50" style="; padding-top:-10px">
                            <h4 class="row">Image Three </h4>
                            <div class="row">
                                <img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
                                <h4 class="col col-60"> 5.0</h4>
                            </div>
                        </div>
                    </span>
                    <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
                </div>
            </ion-slide>
        </ion-slide-box>
 </ion-content>
</ion-view>

最喜欢的
图像一
5
最喜欢的
图二
5
最喜欢的
图三
5

此外，我尝试使用以下方法修改ionic.app.css，但不起作用：

<div class="row row-up">

 .row-up{
  padding:-10px; }
 }

.划船{
填充：-10px；}
}

---

谢谢…

没有负数

填充之类的东西。请尝试
页边距顶部：-10px

你不能做负片
填充
。试试
margin top:-10px
。非常感谢：）这是工作，对不起，我对网络编程非常陌生，以前从未做过html、css和js。