HTML5盒子模型属性

盒子模型属性：

1.margin属性：

单位：px像素,百分百%等

       在HTML5中，margin属性是指定元素外边距的CSS属性。外边距是元素边框外侧的空白区域，用来在元素的边框和相邻元素之间或元素的内容和边框之间创建空间。margin属性是可继承的，这意味着你可以将外边距应用到一个元素，而这个元素的所有子元素也会继承这个外边距，除非子元素有自己明确的外边距设置。

       1.1 集合写法：

        margin属性值为1个值：上右下左都一致(即这个值将应用到所有四个方向)

        例如：margin: 10px;(这将设置上、右、下、左四个方向的外边距均为10像素。)

        margin属性值为2个值：上下,左右

        例如：margin: 10px 20px;(这将设置上边距和下边距为10像素，左右边距为20像素。)

        margin属性值为3个值: 上，左右，下

        例如：margin: 10px 20px 30px;(这将设置上边距为10像素，左右边距为20像素，下边距为30像素。)

        margin属性值为4个值: 上，右，下，左(一定要注意他们的顺序)

        例如：margin: 10px 20px 30px 40px;(这将设置上边距为10像素，右边距为20像素，下边距为30像素，左边距为40像素)

        1.2 方位写法：

        margin-top:上

        margin-right:右

        margin-bottom:下

        margin-left:左

       注意：margin属性的值可以是任何长度单位，如像素(px)、百分比(%)、em、rem等。使用负值是允许的，这会导致外边距收缩（margin collapse），即两个垂直相邻的外边距会合并为一个外边距。

       在HTML5中，margin属性的使用对于页面的布局和设计非常重要，它可以帮助你控制元素的位置和空间。

2.padding属性：

       单位：px像素,百分百%等

       在HTML5中，padding是指在网页元素的内容（content）和边框（border）之间的空间。通过调整padding属性，可以改变元素内部的空间大小，从而影响页面的布局和设计。

       HTML5中，padding可以通过CSS（层叠样式表）来控制。你可以使用padding-top、padding-right、padding-bottom、padding-left这四个属性来分别设置元素的上、右、下、左边的内边距。此外，还可以使用padding属性来设置所有四边的内边距，它是一个简写属性，可以接受单个值，该值会应用到所有四个边。

       2.1 集合写法：

       padding属性值为1个值：上右下左都一致 

       padding属性值为2个值：上下,左右

       padding属性值为3个值: 上，左右，下 

       padding属性值为4个值: 上，右，下，左

       2.2 方位写法：

       padding-top:上

       padding-right:右

       padding-bottom:下

       padding-left:左

       注意：内边距会影响元素的总宽度（对于水平内边距）和总高度（对于垂直内边距），因为它们是在元素的宽度和高度计算之外的额外空间。这意味着，如果你设置了元素的宽度和高度，再加上内边距，就会得到元素的最终可视宽度和大高度。

       内边距也可能会影响元素的布局，特别是在使用Flexbox或Grid布局时，因为这些布局模型会考虑内边距空间。