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

来源：互联网发布：合泰触摸单片机芯片编辑：程序博客网时间：2024/06/05 15:17

盒子模型

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>

这里写图片描述
根据代码图片所知，行内元素竖直方向margin和padding无效，但是padding有效果，不占空间，一般情况下不影响其它元素

阅读全文

0 0