html盒模型

<style>
    hr{
        width: 300px;
    }
    section{
        width: 300px;
        /*height: 300px;*/
        background-color: lightcoral;

        /*margin 和padding的用法一致，可以是一个值、两个值、四个值、单独某个方向的值*/
        margin: 50px auto;



        /*标签：内容、内边距、边框、外边距*/
        /*两种盒模型 
        1.内容盒子：content-box 标签内容的大小不变，标签的 总宽度 = 内容的宽+内边距+边框的总和
        2.边框盒子：border-box 标签的总宽度保持不变，把内边距和边框的大小计算在内容的大小之内
        */
        /*设置标签尺寸的计算方式*/
        box-sizing: border-box;


        border: 5px solid blue;

        /*设置内边距，一个值同时设置上右下左四个方向的内边距*/
        /*padding: 50px;*/

        /*两个值分别表示上下、左右方向的内边距*/
        /*padding: 20px 60px;*/

        /*四个值分别表示上、右、下、左 四个方向的内边距*/
        /*padding: 20px 40px 60px 120px;*/

        /*单独设置某个方向的内边距*/
        /*padding-top: 20px;
        padding-right: 40px;
        padding-bottom: 60px;
        padding-left: 80px;*/

    }
    p{
        /* 两个相邻的块元素，外边距在上下方向会重叠，重叠后的外边距取值为其中最大的外边距 */
        /* 必须是块元素，而且必须是上下外变距，才会重叠  */
        border: 5px solid red;

        /* 子元素的上下外间距会和父元素的外边距重叠 */
    }
</style>

---

<section>
    花好月圆 花好月圆 花好月圆 花好月圆 花好月圆 花好月圆 
    花好月圆 花好月圆 花好月圆 花好月圆 花好月圆 花好月圆 
    花好月圆 花好月圆 花好月圆 花好月圆 花好月圆 花好月圆 
</section>
<p>这是一段话，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p>这是一段话，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>