如何只更改一个属性并将其他属性保留为相同的值？

Question

这是页脚：

.smartFooter {
  width: 100%;
  margin: auto;
  background-color: #2C2C2C;
  color: white;
}
.footerContainer {
  width: 90%;
  margin: auto;
  display: table;
}
.footerLogo {
  margin-top: 20%;
}
.footerAbout {
  display: table-cell;
}
.footerProducts {
  display: table-cell
}

<footer class="smartFooter">
  <div class="footerContainer">

    <div class="footerLogo">
      <img src="img/smart_logo.png" alt="logo" width="200">
    </div>

    <div class="footerAbout">
      <h3>About</h3>
      <ul>
        <li><a href="#"><i></i>Like us on Facebook</a>
        </li>
        <li><a href="#"><i></i>Follow us on Twitter</a>
        </li>
        <li><a href="#"><i></i>Add us on Google Plus</a>
        </li>
        <li><a href="#"><i></i>Follow us on Dribbble</a>
        </li>
        <li><a href="#"><i></i>Follow us on Pinterest</a>
        </li>
      </ul>
    </div>

    <div class="footerProducts">
      <h3>Products</h3>
      <ul>
        <li><a href="#"><i></i>Like us on Facebook</a>
        </li>
        <li><a href="#"><i></i>Follow us on Twitter</a>
        </li>
        <li><a href="#"><i></i>Add us on Google Plus</a>
        </li>
        <li><a href="#"><i></i>Follow us on Dribbble</a>
        </li>
        <li><a href="#"><i></i>Follow us on Pinterest</a>
        </li>
      </ul>
    </div>
  </div>
</footer>

但是当我尝试更改class =“footerLogo”的属性时，每次出售都会获得相同的值。例如 - 如果我尝试为class =“footerLogo”值写“margin-top”，那么所有页脚内容都会开始改变。

如何更改红线课程的值？

Answer 1

如果没有更坚实的东西，那就无法帮到你。

.smartFooter {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  margin: 0;
  background-color: #2C2C2C;
  color: white;
}

.footerLogo, .footerAbout, .footerProducts {
  display: inline-block;
  width: 30%;
}

.footerLogo {
  margin-top: 20px;
}

<footer class="smartFooter">
    <div class="footerLogo">
      <img src="http://lorempixel.com/100/100" alt="logo">
    </div>

    <div class="footerAbout">
      <h3>About</h3>
      <ul>
        <li><a href="#"><i></i>Like us on Facebook</a>
        </li>
        <li><a href="#"><i></i>Follow us on Twitter</a>
        </li>
        <li><a href="#"><i></i>Add us on Google Plus</a>
        </li>
        <li><a href="#"><i></i>Follow us on Dribbble</a>
        </li>
        <li><a href="#"><i></i>Follow us on Pinterest</a>
        </li>
      </ul>
    </div>

    <div class="footerProducts">
      <h3>Products</h3>
      <ul>
        <li><a href="#"><i></i>Like us on Facebook</a>
        </li>
        <li><a href="#"><i></i>Follow us on Twitter</a>
        </li>
        <li><a href="#"><i></i>Add us on Google Plus</a>
        </li>
        <li><a href="#"><i></i>Follow us on Dribbble</a>
        </li>
        <li><a href="#"><i></i>Follow us on Pinterest</a>
        </li>
      </ul>
    </div
</footer>

请注意，图像仅为100px高/宽。如果边距过高，那么无论如何它们都会在顶部有一个奇怪的空间。

这通常也不是margin-top:20px的意思.20％与宽度有关，而与视口高度无关。最好使用px值而不是%。