10 pxのパディングで2ダイビングを設定する

Question

2つのブートストラップといくつかの手書きCSSで動作する単純なhtmlページがあります。ここ はhtmlページです：

.header { 
 
     width: 1024px; 
 
     height: 60px; 
 
     background-color: #ffffff; 
 
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09); 
 
    } 
 
    .gotoAndBot { 
 
     width: 109px; 
 
     height: 20px; 
 
     font-family: Roboto; 
 
     font-size: 15px; 
 
     font-weight: 500; 
 
     font-style: normal; 
 
     font-stretch: normal; 
 
     letter-spacing: 0.2px; 
 
     text-align: center; 
 
     color: #62e2c0; 
 
    } 
 
    #gal-bot-marvin-jpg { 
 
     width: 40.7px; 
 
     height: 41.7px; 
 
    } 
 
    .Oval-3 { 
 
     width: 42.9px; 
 
     height: 44px; 
 
     background-color: #ffffff; 
 
     border: solid 4px #62e2c0; 
 
    }

 <div class="container"> 
 
     <div class="header"> 
 
       <div class="row" style="padding-left:10 px;"> 
 
        <div class="col-sm-1"> 
 
        <!--img id="Oval-3" src="../assets/robot.png"--> 
 
         <div class="Oval-3"> 
 
         Robot 
 
         </div> 
 
        </div>   
 
        <div> 
 
         <div class="col-sm-1 gotoAndBot " style="padding-left:10 px;"> 
 
           gotoAndBot  
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

私は内側のdivタグ（header）から15 PX marginとOval-3クラスを配置する必要があります。 また、行の2つのdivの間に10 pxのマージンが必要です（Oval-3とgotoAndBot） しかし、それはそうではありませんか？

Answer 1

1. あなたはdiv.header以内にいくつかの領域を持っているしたい場合は、このブロックにpadding: 15px;を追加することができ、クラスgotoAndBotとrow

2. とブロックにstyle="padding-left:10px;"にスペースを削除する必要があります。しかし、固定された高さを削除する必要があることを覚えておいてください。そうしないと、望むように動作しません。たとえば、代わりに一定の高さを使用するのではなく、あなたが行の10pxの2間のdiv（Oval-3とgotoAndBot）のスペースを持っているためにmin-height: 60px;

3. を使用することができ、あなたは、いくつかのブートストラップクラスを書き換える必要があります。 col-sm-1などのブートストラップクラスには、デフォルトでpadding-right、padding-left、およびが設定されているためです。

Answer 2

あなたのHTMLは、独自のパディングルールを持つ混乱しているブートストラップだと思います。これらのルールを無効にすることができますが、レイアウトのこのビットにはブートストラップを使用しないほうが簡単かもしれません。

ブートストラップの「行」パディングをインラインCSSでオーバーライドしようとしていますが、.col-sm-1.gotoAndbotもDIVでラップされていますが、必要はないと思います。

   <style> 
       .header { 
        width: 1024px; 
        height: 60px; 
        background-color: #ffffff; 
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09); 
       } 
       .gotoAndBot { 
        width: 109px; 
        height: 20px; 
        font-family: Roboto; 
        font-size: 15px; 
        font-weight: 500; 
        font-style: normal; 
        font-stretch: normal; 
        letter-spacing: 0.2px; 
        text-align: center; 
        color: #62e2c0; 
        float: left; 
        margin: 0 0 0 10px; 
       } 
       #gal-bot-marvin-jpg { 
        width: 40.7px; 
        height: 41.7px; 
       } 
       .Oval-3 { 
        width: 42.9px; 
        height: 44px; 
        background-color: #ffffff; 
        border: solid 4px #62e2c0; 
        margin: 0 0 0 15px; 
        float: left; 
       } 
       </style> 
       <div class="container"> 
        <div class="header"> 
           <div class="Oval-3"> 
            Robot 
           </div> 
           <div class="gotoAndBot"> 
             gotoAndBot 
           </div> 
        </div> 
       </div>