html - 对 h1 标题的更改会影响整个页面，但会更改目标元素

问题描述

我正在尝试将 H1 与它下面的 div 左对齐。我这样做的方法是添加 margin-left （如果有更好的方法来实现这个目标，请提出建议）。当我在 h1 元素的左侧添加边距时，我的整个页面向右移动。

我不确定为什么我对 h1 元素所做的更改会影响我的整个页面。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Website design system</title>
    <link href='styles.css' rel='stylesheet' >
  </head>
  <body>
    <h1>Webste Design System<h1>
      <!--begining of colors section-->
    <div class='colors'>
      <h2>Colors</h2>
      <div id='orange'>
         <p>Dark Orange</p>
         <p>#ff8c00</p>
      </div>
      <div id='grey'>
        <p>dimgrey</p>
        <p>#696969</p>
      </div>
      <div id='mint'>
        <p>Mint Green</p>
        <p>#4fe0b0</p>
      </div>
      <div id='red'>
        <p>Red</p>
        <p>#FF0000</p>
      </div>
      </div>
  <!-- end of colors section-->
  <!-- start of fonts section -->
    <div class='fonts'>
      <h2>Fonts</h2>
      <div class='oswald'>
        <h3>Oswald</h3>
        <p id='os-thin'>The quick brown fox jumps over the lazy dog.</p>
        <p id='os-normal'>The quick brown fox jumps over the lazy dog.</p>
        <p id='os-bold'>The quick brown fox jumps over the lazy dog.</p>
      </div>
      <div class='poppins'>
        <h3>Poppins</h3>
        <p id='poppins-normal'>The quick brown fox jumps over the lazy dog.</p>
        <p id='poppins-italic'>The quick brown fox jumps over the lazy dog.</p>
        <p id='poppins-bold'>The quick brown fox jumps over the lazy dog.</p>
      </div>  
      <div class='lato'>
        <h3>Lato</h3>
        <p id='lato-italic'>The quick brown fox jumps over the lazy dog.</p>
        <p id="lato-normal">The quick brown fox jumps over the lazy dog.</p>
        <p id='lato-bold'>The quick brown fox jumps over the lazy dog.</p>
      </div>
    </div>
   <!-- end of fonts section--> 


  </body>

</html>

CSS 文件

h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  margin-left: 20px;
}

h3 {
  text-decoration: underline;
  font-size: 22px;
  margin-left: 20px
}

.colors {
  border: 2px solid gray;
  height: 400px;
  margin: 0px 50px;
}
.fonts {
  border: 2px solid gray;
  height: 500px;
  margin: 20px 50px 20px 50px;
}
#orange {
  background-color: darkorange;
}

#grey {
  background-color: dimgrey;
}

#mint {
  background-color: #4fe0b0;
}

#red {
 background-color: #f00;
 position: relative;
 top: 20px;
}
#lato-italic {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-weight: 400;
}
#lato-bold {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}
#lato-normal {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}
#poppins-normal {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}
#poppins-italic {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
}
#poppins-bold {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
#os-thin {
  font-family: 'Oswald', sans-serif;
  font-weight: 200;
}
#os-normal {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}
#os-bold {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}
.colors div {
  display: inline-block;
  width: 300px;
  font-family: 'Oswald', sans-serif;
  font-weight: 200;
  font-size: 20px;
  color: white;
  text-align: center;
  margin-left: 20px;
}

.fonts div {
  font-size: 15px;
  display: inline-block;
  width: 385px
}

.fonts p {
  margin-left: 20px;
}

标签： htmlcss

html - 对 h1 标题的更改会影响整个页面，但会更改目标元素

问题描述

解决方案

推荐阅读