细说padding与margin:盒模型--宽度和高度

第三方分享代码
admin 2017-04-19 CSS学习 82 0

细说paddingmargin

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

盒模型--宽度和高度2.jpg

元素的高度也是同理。

比如:

css代码:

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代码:

<body>
   <div>文本内容</div>
</body>

元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型,如下图:

盒模型--宽度和高度2.jpg

 与padding相关文章

1、padding和box-sizing:border-box; 外边距变内边距、外边框变为内边框

网友评论

  • (*)
还没有评论!