【代码笔记】Web-CSS-CSS盒子模型

一，效果图。

二，代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS 盒子模型</title>
    <style>
    div.ex {
        width: 220px;
        padding: 10px;
        border: 5px solid gray;
        margin: 0px;
    }
    </style>
</head>

<body>
    <img src="w3css.gif" width="250" height="250" />
    <div class="ex">the picture above is 250px wide.the total width of this element is also 250px.</div>
</body>

</html>

参考资料:《菜鸟教程》

一，效果图。

【代码笔记】Web-CSS-CSS盒子模型

二，代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS 盒子模型</title>
    <style>
    div.ex {
        width: 220px;
        padding: 10px;
        border: 5px solid gray;
        margin: 0px;
    }
    </style>
</head>

<body>
    <img src="w3css.gif" width="250" height="250" />
    <div class="ex">the picture above is 250px wide.the total width of this element is also 250px.</div>
</body>

</html>

参考资料:《菜鸟教程》