странное поведение padding

Toxa404 · March 11, 2017

Html код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axit</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>     
      <div class="bg_h">
           <header>
               <a href="index.html" > <img src="img/logo.png"></a>
               <ul class="sidebar_head">
                   <li><a href="">Features</a></li>
                   <li><a href="">About</a></li>
                   <li><a href="">Pricing</a></li>
                   <li><a href="">Reviews</a></li>
                   <li><a href="">Contact</a></li>
               </ul>
           </header>
       </div>  
    <div class="wrapper">       
       <div class="block_1 ">
          <div class=" modern">
             <div class="form">
                 <ul>
                     <li><button class="but_1">Try Your FREE Trial Today</li>
                     <li><input type="text" placeholder="Name"></li>
                     <li><input type="email" placeholder="Email"></li>
                     <li><input type="password" placeholder="Password"></li>
                     <li><button class="but_2">Get Started</button></li>
                </ul>
              </div>
              <span>MODERN AXURE TEMPLATE <br> FOR BEAUTIFUL PROTOTYPES</span>
              <img src="img/modern_line.png" alt="">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean <br>
                euismod bibendum laoreet. Proin gravida dolor sit amet lacus <br>
                accumsan et viverra justo commodo.
              </p>
              <button>Download</button>              
          </div>           
       </div>
       <div class="social_media">
              <ul>
                    <li><a href="" class="icon rss"></a></li>
                    <li><a href="" class="icon znak"></a></li>
                    <li><a href="" class="icon inst"></a></li>
                    <li><a href="" class="icon pi"></a></li>
                    <li><a href="" class="icon goog"></a></li>
                    <li><a href="" class="icon twit"></a></li>
                    <li><a href="" class="icon fb"></a></li>
                </ul> 
              <h2>Social Media</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
                Aenean euismod bibendum laoreet.</p>                              
       </div>  <!--social_media END  -->
       <div class="tab_soft">
           <p>dasdawsdaw</p>
       </div>
  </div>  
</body>
</html>

CSS код

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
                            
body{
    font-family: 'Times New Roman';
       background-color: #282828; 
}                                
.wrapper{         
    width: 1400px;
    margin: 0 auto;    
    padding: 100px;
    
}
                            /* header */
.bg_h{   
    background-color:#000;    
}
header{
    max-width:1400px;
    margin: 0 auto;    
    height: 70px;
}
header>a{
    display: inline-block;
    margin:20px 0 20px 150px;
}
header li{
    display:inline-block;    
}
.sidebar_head{
    float:right;   
    margin-top: 25px;
    margin-right: 150px;    
}
.sidebar_head a{
    color:#c9c9c9;
    font-size: 14px;
    font-family: 'Times New Roman';
    margin-left: 43px;
}
                        /*header end*/
.block_1{
    height: 640px;
    background-color: #9a9a9a;    
}
.modern{
    height: 640px;
    background-image: url(img/Logo_modern.png);
    background-repeat: no-repeat;
    background-position: 140px 110px;
/*    padding-left: 140px;*/
    padding-right: 140px;
}
.block_1 span{
    display: block;
    color: #fff;
    font-size: 36px;
    font-weight: normal;
    font-family: 'Times New Roman';
    padding-top: 200px;
}
.block_1 img{
    margin-top:40px;
}
.block_1 p{
    font-size: 16px;
    line-height: 23px;
    color:#c6c6c6;
    margin-top: 40px;    
}
.modern>button{
    font-size: 15px;
    line-height: 15px;
    color:#fff;
    padding: 13px 28px;
    border:2px solid #f5f5f5;
    margin-top: 45px;
    background-color: #9a9a9a;
}
.form{
    float: right;
    width: 362px;
    height: 362px;
    margin-top: 140px;
    background-color: #fff; 
    border-radius: 5px 5px 5px 5px;
}
.but_1{
    width: 362px;
    font-size: 20px;
    line-height: 60px;
    background-color: #f5f5f5;
    border:none;
    border-radius: 5px 5px 0 0;
}
.but_2{
    color:#fff;
    font-size: 15px;
    background-color: #ff9b51;    
    height: 53px;
    width: 362px;
    border: none;
    margin-top: 44px;
    border-radius:0 0 5px 5px ;    
}
.form input{
    margin:0 40px;
    margin-top: 35px;
    width:275px;
    height: 30px;
    border:none;
    border-bottom: 1px solid #d6d6d6;
    border-left: 1px solid #fbfbfb;
    border-right: 1px solid #fbfbfb;    
}
.social_media{    
    border-bottom: 1px solid #b7b7b7;
    outline-bottom: solid 1px #d6d6d6;
    padding:22px 83px 20px 140px;
    
    background-color:#fff;
}
.social_media h2{
    margin-bottom: 10px;
    font-size: 20px;
    color:#282828;
    font-weight: bold;
}
.social_media p{
    font-size: 15px;
    line-height: 20px;
    color:#a9aaac;  
    
}
.icon{
    height: 50px;
    width: 54px; 
    float:right;
    margin:7px 45px auto 0;
}
.rss{
    background: url(img/social-media-icons.png) no-repeat -591px center;
}
.znak{
    background: url(img/social-media-icons.png) no-repeat -483px center;
}
.inst{
    background: url(img/social-media-icons.png) no-repeat -376px center;
}
.pi{
    background: url(img/social-media-icons.png) no-repeat -272px center;
}
.goog{
    background: url(img/social-media-icons.png) no-repeat -183px center;
}
.twit{
    background: url(img/social-media-icons.png) no-repeat -76px center;
}
.fb{
    background: url(img/social-media-icons.png) no-repeat 20px center;
}
.tab_soft{
    height: 590px;
    background-color: #f5f5f5;
}

не понимаю почему padding в классе wrapper действуют как маргины, хочу сделать отступы с левой и правой стороны внутри блока , а отступы появляются вокруг . Вроде бы вложено все правильно, в верстке новичек прошу строго не судить)

Konstantin99 · March 16, 2017

Задай padding для .block_1

Или более конкретно опиши что тебе нужно сделать и что от чего должно отступить.

Sign In

странное поведение padding

Question

Toxa404

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Konstantin99

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information