Html css child padding 使它在父边绘制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15424915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css child padding makes it draw out side the parent
提问by Srikan
Applying padding to child elements is making the child draw over the boundaries of its containing parent. Can you please explain the size consideration in margin,padding and content width.
对子元素应用填充使子元素绘制在其包含父元素的边界上。您能否解释一下边距、填充和内容宽度方面的尺寸考虑。
if we increase the padding why don't the parent also re size to the accumulative size of all the childs considering the childs padding size also.
如果我们增加填充，为什么不考虑孩子的填充大小，父级也不将大小调整为所有孩子的累积大小。
<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;
}
What are coding practices that we need to consider to over come this problem.?
我们需要考虑哪些编码实践来克服这个问题。？
Ok guys I got lot answers that do work. Can anybody explain the parent size calculation based on child elements. what are characteristics of the child that are considered while calculating the encompassing parent's size. when the whole padding is considered when it not considered ?
好的，我得到了很多有效的答案。任何人都可以解释基于子元素的父尺寸计算。在计算包含的父母的大小时考虑的孩子的特征是什么。当不考虑整个填充时？
回答by abbood
the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type <a>which by default is display:inline(you can see if that you go in chrome developer tools and see under computed style). an inline element displays like a line of text.. so the way it treats width and height and all that is very different than a block (a div for example is a block by default).
孩子过度绘制父母边界的原因是因为孩子是一个类型的标签，<a>默认情况下是display:inline（你可以看到你是否进入chrome开发者工具并在计算样式下查看）。内联元素像一行文本一样显示......因此它处理宽度和高度的方式以及所有与块非常不同的方式（例如，div 是默认块）。
that being said, if you change the display setting of a to display:inline-blockyou get to keep the inline properties of <a>but at the same time also get the block properties, namely having a padding and width and height that is recognised by its parent node, which will then expandto accommodate it.
话虽如此，如果您更改 a 的显示设置，display:inline-block您将保留其内联属性，<a>但同时也获得块属性，即具有由其父节点识别的填充以及宽度和高度，这将然后扩展以容纳它。
So there aren't any best practices about this. The only best practice is to understand what each display property mean (ie inlinevs blockvs inline-block) and put it to its proper use.
因此，没有任何关于此的最佳实践。唯一的最佳实践是了解每个显示属性的含义（即inlinevs blockvs inline-block）并正确使用它。
回答by Dipesh Parmar
Use display:inline-block;
用 display:inline-block;
a {
background-color: #C34567;
display: inline-block;
padding: 10px;
}
SEE DEMO
看演示
- An inline element has no line break before or after it, and it tolerates HTML elements next to it.
- A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
- An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
- 内联元素之前或之后都没有换行符，并且可以容忍旁边的 HTML 元素。
- 块元素的上下都有一些空白，并且不允许在它旁边有任何 HTML 元素。
- 内联块元素作为内联元素放置（与相邻内容在同一行），但它的行为与块元素相同。
回答by Rohit Sharma
Can be solved without making any change in atag. Just add overflow: hidden;property to divelement.
可以在不更改a标签的情况下解决。只需将overflow: hidden;属性添加到div元素。
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
overflow: hidden; /*expends its height if not fixed*/
}
Updated fiddle here: http://jsfiddle.net/NkXUW/52/
在这里更新小提琴：http: //jsfiddle.net/NkXUW/52/
回答by Bhojendra Rauniyar
回答by jhunlio
about different between margin and padding please read thismaybe it help you
关于边距和填充之间的不同，请阅读本文也许对您有所帮助
I don't think this is correct floatyour div wrapper
我不认为这是正确float的div wrapper
working demo
工作演示
div {
float:left;
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
hope this help you..
希望这对你有帮助..
