CSS【display 属性】- 表严肃

https://www.bilibili.com/video/av7293888/index_12.html#page=14
@表严肃
———————————————————————————————————
div默认为block
浏览器里各种元素都是默认向左上角靠拢
display: none; 元素不显示

• 块级元素 block 比较“强硬”，指定宽度为500px后，会自动生成边距（margin-right），缺多少补多少
• 行内元素 inline 比较“柔和”，只占自己的一小块地方
• 行内块元素 inline-block 兼具二者特点

<div class="block">块级元素</div>
<div class="inline">行内元素</div>
<div class="inline-block">行内块元素</div>

.block {
    display: block;
    background: red;
    width: 500px;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
    background: #ccc;
}

例如，以上代码会显示：

display.jpg

行内元素改padding、margin左右会变，上下不变

.inline {
    display: inline;
    padding: 40px;
}

1.jpg

行内块元素改padding、margin，上下左右都会变

.inline-block {
    display: inline-block;
    background: #ccc;
    padding: :40px;
}

2.jpg