为什么下拉菜单的内边距不会随着父元素内边距的增加而增加？

img



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/fa/css/all.css" />
    <style>
      header::before,
      header::after {
        content: "";
        clear: both;
        display: table;
      }
      header {
        font-size: 12px;
        color: #999;
        line-height: 30px;
        border-bottom: #ddd solid 1px;
        background-color: #e3e4e5;
      }
      .inner-wrapper {
        width: 1190px;
        margin: 0 auto;
      }
      .location {
        float: left;
       padding:0 10px;
      }
      .location:hover{
          background-color: white;
     }
      .pull-down-list{
          height:433px;
          width:302px;
          background-color: white;
          display: none;
          border:solid rgb(204,204,204) 1px;
          position:absolute;
          box-shadow:0 0 2px rgba(0,0,0,.2)
          
      }
      .location:hover > .pull-down-list{
          display:block;
      }
      ul {
        float: right;
      }
      ul li {
        float: left;
        color: #999;
        text-decoration: none;
      }
      a {
        color: #999;
        text-decoration: none;
      }
      a:hover {
        color: red;
      }
      .fa-map-marker-alt {
        color: red;
      }
      .cutting-line {
        height: 10px;
        width: 1px;
        background-color: #ccc;
        float: left;
        margin: 10px 12px;
      }
      #last{
          margin-right:50px;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="inner-wrapper">
        <div class="location">
          <a href="javascript:;">
            <i class="fas fa-map-marker-alt" style="font-size: 14px"></i>广东
          </a>
          <div class="pull-down-list"></div>
        </div>
        
        <ul>
          <li><a href="javascript:;">你好，请登录</a></li>
          <li class="cutting-line"></li>

          <li>
            <a href="javascript:;" style="color: red">免费注册</a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;">我的订单</a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;"
              >我的京东<i class="fas fa-angle-down"></i>
            </a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;">京东会员</a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;" style="color: red"
              >政企采购<i class="fas fa-angle-down"></i>
            </a>
        </li>
            <li class="cutting-line"></li>
            <li>客户服务<i class="fas fa-angle-down"></i></li>
            <li class="cutting-line"></li>
            <li>网站导航<i class="fas fa-angle-down"></i></li>
            <li class="cutting-line"></li>
          <li>手机京东</li>
          <li class="cutting-line"></li>
          <li>
            <a id="last" href="javascript:;">网站无障碍</a>
          </li>
        </ul>
      </div>
    </header>
  </body>
</html>

内边距padding的含义:内容到border的区域
css有两大特性：继承性和层叠性
像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

img


盒模型的属性
width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

** 所以padding也是无法继承的！** 你的问题就能想明白了，建议去学习一下上述知识点，谢谢！

都说了是父元素了，下拉菜单是子元素，怎么会和父元素padding一样呢，内边距是设置给自身的

内边距 需要 单独设置 。不设置 默认 是 8px; 你是说 继承 内边距 吗