子填充位于父元素之外答案

【问题标题】：Child padding falls outside the parent element子填充位于父元素之外
【发布时间】：2026-02-23 00:55:01
【问题描述】：

对子元素应用内边距会使子元素越过其包含的父元素的边界。你能解释一下边距、内边距和内容宽度的大小考虑吗？

如果我们增加内边距，为什么父母不考虑孩子的内边距也调整到所有孩子的累积大小？

 <div>
       <ul>
          <li><a>srikanth</a>
           </li>
           <li><a>sunkist</a>
        </li>
        <li><a>sunday</a>
        </li>
    </ul>
    </div>



div {
     margin-top:90px;
    margin-left:90px;
    background-color:#676896;
   }
   ul {
     list-style-type:none;
   }
    ul li {
    display:inline-block;
   }
   a {
    background-color:#c34567;
    padding:10px 10px 10px 10px;
   }

我们需要考虑哪些编码实践来解决这个问题。

好吧，伙计们，我得到了很多有效的答案。谁能解释基于子元素的父大小计算。在计算包含父母的大小时要考虑孩子的哪些特征。什么时候考虑整个填充，什么时候不考虑？

【问题讨论】：

以下答案都不适合您？
好吧，伙计们，我得到了很多有效的答案。谁能解释基于子元素的父大小计算。在计算包含父母的大小时要考虑孩子的哪些特征。什么时候考虑整个填充，什么时候不考虑？

标签： html css

【解决方案1】：

孩子过度绘制父母边界的原因是因为孩子是<a>类型的标签，默认情况下是display:inline（您可以查看是否进入chrome开发人员工具并查看计算样式)。内联元素显示为一行文本。因此它处理宽度和高度的方式与块非常不同（例如，默认情况下，div 是块）。

话虽如此，如果您将 a 的显示设置更改为 display:inline-block 您可以保留 <a> 的内联属性，但同时还可以获得块属性，即具有填充和宽度和高度被其父节点识别，然后将expand 容纳它。

因此没有任何关于此的最佳实践。唯一的最佳做法是了解每个显示属性的含义（即inline vs block vs inline-block）并正确使用它。

【讨论】：

【解决方案2】：

使用display:inline-block;

a {
    background-color: #C34567;
    display: inline-block;
    padding: 10px;
}

SEE DEMO

内联元素之前或之后没有换行符，并且它允许其旁边的 HTML 元素。

块元素上下都有一些空格，并且不允许在其旁边出现任何 HTML 元素。

inline-block 元素作为内联元素放置（与相邻内容在同一行），但它的行为类似于块元素。

http://www.w3schools.com/cssref/pr_class_display.asp

【讨论】：

【解决方案3】：

无需更改a 标签即可解决。只需将overflow: hidden; 属性添加到div 元素即可。

div {
  margin-top:90px;
  margin-left:90px;
  background-color:#676896;
  overflow: hidden; /*expends its height if not fixed*/
}

在此处更新小提琴：http://jsfiddle.net/NkXUW/52/

【讨论】：

【解决方案4】：

您必须将display: block; 添加到<a> 元素以根据需要扩展父级。看到这个fiddle

【讨论】：

【解决方案5】：

关于边距和内边距的不同，请阅读this也许对你有帮助

我不认为这是正确的float 你的div wrapper

工作demo

div {
    float:left;
    margin-top:90px;
    margin-left:90px;
    background-color:#676896;
}

希望对你有所帮助..

【讨论】：