CSS学习之width属性 height属性和Padding（内边距）

本人是Web开发新手，最近开始学习CSS，写本文的目的是总结自己的学习经验，也是督促自己学习，要不怕自己不能持之以恒的学习。

吼吼！

 

HTML元素分为块元素和内联元素，块元素和内联元素主要的区别有：

1.块元素的display的默认属性是block而内联元素的默认属性是inline；

2.块元素换行显示，内联元素在同一行显示。

块元素有div和p等等，内联元素有span等。

 

width和height分别指的是HTML元素的内容的宽度和高度。

 

对于块元素如果没有指定内边距（padding）、外边距（margin）和边框（border）时，默认的值为0，根据块元素的盒模型原理，此时HTML元素的大小等于元素内容的宽度和高度。当设置了以上属性时，相当于属性把盒子模型给撑开了，此时HTML元素的大小就不等于元素内容的大小了。

此时，HTML元素的高度=margin-top + border + padding-top+height+padding-bottom+border+margin-bottom;

         HTML元素的宽度=margin-left + border + padding-left+width+ padding-right+border+margin-right.

 

以上，就是本人对CSS的width、height和padding等属性的理解，本人正在学习中，如有不正确的地方请见谅，请大家给予指正。