服务器之家
您的位置： 首页 编程语言 css

css盒子模型_使用边距和填充

100人浏览   2024-12-02 10:33:24 
    <header class="main-header">
      <h1>代码介绍</h1>
      <nav>
        <a href="./blog.html">BLOG</a>
        <a href="#">挑战</a>
        <a href="#">弹性盒子</a>
        <a href="#">CSS</a>
      </nav>
    </header>
.main-header {
  background-color: #f7f7f7;
  padding: 20px;
}


如上，当我们添加了外边距之后，外部都得到一些空间


当然我们也可以在盒子的一个位置上添加padding

  padding-left: 40px;
  padding-right: 40px;

当然上述的代码我们还可以写的更加简便点

padding: 20px 40px; #第一个值代表底部和顶部，第二个值代表左部和右部


margin

  • 例如下图，列表太挤了，我们想每个列表之间有点空隙，这样看起来更好看‘

li {
  font-size: 20px;
  margin-bottom: 10px;
}


  • 但是我们并不想最后一个元素也存在一个margin来调整列表之间的位置
li:last-child {
  margin-bottom: 0;
}


  • 如下图所示，每个元素都有自己默认的边距和位置，让我们很难去控制全局的边距，故在写CSS之前，我们通常会重置页面的边距，我们通常会使用通用选择器去做（边距不可被继承）


* {
  margin: 0;
  padding: 0;
}


接着去修改我们的边距和位置

  • 如上图所示，在相关文章处，分割线和文字太紧了，我们去调整一下
aside {
  background-color: #f7f7f7;
  border-top: 5px solid #1098ad;
  border-bottom: 5px solid #1098ad;
  padding: 50px 0px ;  #上下位置50px，左右0px
}


其他的同理，让我们通过边距和位置来调整到下图一样吧

相关推荐