css样式中margin的使用

概念

css样式中margin属性的使用；

值	描述
auto	浏览器计算外边距
length	自定义固定外边距（单位：像素、厘米）
%	以父级元素宽度的百分比指定外边距
inherit	继承父级元素的外边距属性

栗子

1、length使用：

html：

	<div class="container">
      <div class="box-a">
        <div class="box-a-a"></div>
      </div>
    </div>

css：

	 .container {
        width: 100%;
        height: 600px;
      }
      .box-a {
        width: 400px;
        height: 500px;
        border: 2px solid red;
      }

      .box-a-a {
        width: 100%;
        height: 250px;
        background-color: pink;
        margin-top: 200px;
      }

效果图：

% 的使用：

注意：% 是基于父容器的 宽度 设定外边框

html：

	<div class="container">
      <div class="box-a">
        <div class="box-a-a"></div>
      </div>
    </div>

CSS：

      .container {
        width: 100%;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box-a {
        width: 400px;
        height: 500px;
        border: 2px solid red;
      }

      .box-a-a {
        width: 100%;
        height: 250px;
        background-color: pink;
        margin-top: 100%;
      }

效果图：

inherit 的使用

这个…好像不能继承父级margin，如有其他想法请评论留言一块交流交流。