设置2次潜水，填充10 px

Question

我有一个简单的html页面，它与2引导和一些令人沮丧的css工作。以下是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>

​

我需要将Oval-3类与内部div标记(header)中的15 px margin放在一起。另外，行中的两个div (Oval-3和gotoAndBot )之间应该有10个px边距，但它不是这样的？

Answer 1

1. 您需要在style="padding-left:10px;"块中用类gotoAndBot和row删除一个空格
2. 如果您想在div.header中有一些空间，可以将padding: 15px;添加到这个块中。但是要记住，你也需要移除固定的高度，否则，它不会按照你想要的方式工作。例如，您可以使用min-height: 60px;，而不是使用固定高度
3. 要在行中的2个div之间有10 To的空间(Oval-3和gotoAndBot )，您需要重写一些引导类。因为col-sm-1等引导类默认设置了padding-right、padding-left和width。

Answer 2

我认为您的HTML是混乱的引导程序，它有自己的填充规则。您可以重写这些规则以确保，但是不对布局的这一部分使用引导可能会更容易。

您正在尝试用内联CSS和.CSS 1.1.gotoAndbot覆盖引导程序的“行”填充，但我认为不需要。

                <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>