demo39-案例:盒子的真实尺寸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 340px;
                height: 240px;
                /*background: pink;*/
                border: 10px solid black;
                padding: 20px;
                font-size: 14px;
                color: black;
                line-height: 24px;
                text-indent: 2em;
                
            }
            span{
                /*color是设置字体颜色*/
                color: red;
            }
        </style>
    </head>
    <!--
        盒子真实尺寸:
        
        宽=元素的width+padding左右两部分+border左右两部分
        
        高=元素的height+padding上下两部分+border上下两部分
        
        Snipaste  截图工具
    -->
    <body>
        <div class="title">
            <h2 align="left">HTML概述</h2>
        </div>
        <div class="box">
            <p>
                <span>HTML</span>是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。<br />
                &lt;div&gt;这是成对出现的标签&lt;/div&gt;
            </p>
        </div>
    </body>
</html>
演示效果: