老师有问题

来源：4-5 幻灯片区

慕侠4208987

2020-04-04 10:42:37

问题我设置.slider-text-container padding：20px 0无效设置margin就能生效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>三星主界面</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
</head>
<body>
<header class="header-container">
  <div class="container">
   <div class="row">
    <div class="header-logo-container col-8 col-md-3">
     <a href="./index.html" class="header-logo">
      <img src="img/logo.svg" alt="cellphone">
     </a>
    </div>
    <div class="header-btn-container col-4 d-md-none">
     <button type="button" class="btn-toggle" id="btn-toggle">
      <span class="btn-toggle-bar"></span>
      <span class="btn-toggle-bar"></span>
      <span class="btn-toggle-bar"></span>
     </button>
    </div>
    <div class="header-nav-container col-md-9 d-md-block d-none">
     <ul class="header-nav">
      <li class="header-nav-item">
       <a href="###" class="header-nav-link">手机&平板</a>
      </li>
      <li class="header-nav-item">
       <a href="###" class="header-nav-link">电视&影音</a>
      </li>
      <li class="header-nav-item">
       <a href="###" class="header-nav-link">生活家电</a>
      </li>
      <li class="header-nav-item">
       <a href="###" class="header-nav-link">电脑/办公/存储</a>
      </li>
      <li class="header-nav-item">
       <a href="###" class="header-nav-link">网上商城</a>
      </li>
     </ul>
    </div>
   </div>
  </div>
</header>
<nav class="nav-container d-md-none" id="nav">
  <ul class="container">
   <li><a href="###" class="nav-link">手机&平板</a></li>
   <li><a href="###" class="nav-link">电视&影音</a></li>
   <li><a href="###" class="nav-link">生活家电</a></li>
   <li><a href="###" class="nav-link">电脑/办公/存储</a></li>
   <li><a href="###" class="nav-link">网上商城</a></li>
  </ul>
</nav>
<div class="slider-container">
  <div class="container">
   <div class="row">
    <div class="slider-text-container col-md-5 col-md-push-7">
     <h3 class="slider-title">Galaxy S9 | S9+</h3>
     <h4 class="slider-subtitle">冰蓝换新上市</h4>
     <div class="slider-btns">
      <a href="###" class="btn-rounded">了解更多</a>
      <a href="###" class="btn-rounded">立即购买</a>
     </div>
    </div>
    <div class="col-md-7 col-md-pull-5">
     <img src="img/1.png" alt="cellphone">
    </div>
   </div>
  </div>
</div>
<script type="text/javascript">
  var nav=document.getElementById('nav');
  var navExtendedClassName='nav-container-extended';
  document.getElementById("btn-toggle").onclick=function(){
   if(nav.classList.contains(navExtendedClassName)){
    nav.classList.remove(navExtendedClassName);
   }else{
    nav.classList.add(navExtendedClassName);
   }
  };
</script>
</body>
</html>

/*header主界面start*/
.header-container{
background-color:#fff;
border-bottom:1px solid #dadada;
}
/*header主界面end*/
/*header中三大块start*/
.header-nav-container,
.header-logo-container,
.header-btn-container{
height:64px;
}
/*header中三大块end*/
/*btn位置设置start*/
.header-btn-container{
display: flex;
align-items: center;
justify-content: flex-end;
}
/*btn位置设置end*/
/*按钮制作start*/
.btn-toggle{
padding:10px;
background-color:transparent;
border:none;
border-radius: 4px;
cursor: pointer;
}
.btn-toggle:hover{
background-color:#f9f9f9;
}
.btn-toggle-bar{
display:block;
width:24px;
height:4px;
background-color: #363636;
border-radius: 2px;
}
.btn-toggle-bar+.btn-toggle-bar{
margin-top:4px;
}
.btn-toggle:hover .btn-toggle-bar{
background:#1428a0;
}
/*按钮制作end
/*logo图标start*/
.header-logo{
display:flex;
align-items: center;
width:136px;
height:100%;
}
.header-nav,
.header-nav-item,
.header-nav-link{
height:100%;
}
.header-nav{
display: flex;
justify-content: flex-end;
font-size: 14px;
}
.header-nav-item{
margin-left: 24px;
}
.header-nav-item:first-child{
margin-left:0;
}
.header-nav-link{
display: flex;
align-items: center;
font-weight: bold;
}
/*logo图标end*/
/*导航显示布局start*/
.nav-container{
height:0;
overflow: hidden;
position:relative;
top:-1px;
border-bottom: 1px solid #dadada;
transition: height 0.5s;
}
.nav-container-extended{
height:201px;
top:0;
}
.nav-link{
display:block;
height:40px;
line-height:40px;
font-weight:bold;
}
/*导航显示布局end*/
/*slider布局start*/
.slider-container{
margin:20px 0;
}
.slider-container .row{
background-color:#f5f5f5;
margin:0;
}
.slider-text-container{
padding:20px 0;
}
.slider-title,
.slider-subtitle,
.slider-btns{
margin-bottom:20px;
text-align:center;
}
.slider-title{
font-size:30px;
}
.slider-subtitle{
font-size:20px;
font-weight:normal;
}
.btn-rounded{
display:inline-block;
padding:10px 30px;
background-color: transparent;
border:1px solid #000;
border-radius:30px;
color:#000;
font-size:16px;
font-weight:bold;
transition:all 0.3s;
}
.btn-rounded:hover{
color:#fff;
background:#000;
}
.slider-btns .btn-rounded{
margin:0 10px 10px 0;
}
.slider-btns .btn-rounded:last-child{
margin-right:0;
}
/*slider布局end*/

*{
box-sizing:border-box;
padding:0;
margin:0;
}
body{
font-size:14px;
}
li{
list-style:none;
}
a{
font-size:14px;
color:#363636;
text-decoration:none;
}
a:hover{
color:#1428a0;
}
img{
vertical-align:top;
width:100%;
border:none;
}