行内元素竖直方向margin和padding以及盒子模型问题

最新推荐文章于 2022-04-24 15:44:33 发布

dreamer_zhou

最新推荐文章于 2022-04-24 15:44:33 发布

阅读量561

点赞数

分类专栏： CSS 文章标签： margin padding 盒子模型行内元素 css

本文链接：https://blog.csdn.net/wq_zhou/article/details/78057774

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

盒子模型

W3C盒子模型（标准模型）：
1. 在html文件顶部加上 doctype声明（标准模式），所有浏览器都会采用标准的w3c盒子模型去解释盒子（标准模型兼容各个浏览器）
2. 一个盒子的总宽度 = width + 左右padding + 左右border + 左右margin
3. 一个容器级盒子的background-color背景色包括：width + padding + border。border-color默认值为黑色，border-width默认值为2px
IE盒子模型：
1. 不加 doctype声明（怪异模式），IE浏览器（IE6及以下）用IE盒子模型去解释盒子
2. 一个块的总宽度 = width + 左右margin （width已经包含左右padding和左右border）

行内元素竖直方向margin与padding问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            font-size: 30px;
            background-color: #aaa;
            border: 4px solid red;
            text-align: center;
            /* vertical-align: bottom;
            display: table-cell; */
            line-height: 350px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            border: 4px dashed blue;
        }
        .span {
            border: 4px dotted green;
            background-color: greenyellow;
            padding: 20px;
            margin: 20px;       }
    </style>
</head>
<body>
    <div class="box1">helloworld</div>
    <span class="span">我是行内元素span</span>
    <div class="box2"></div>
</body>
</html>