内联元素的盒模型

• 内联元素不支持宽(width)和高(height)
• 支持水平方向的内边距和边框
• 外边距支持只水平方向不支持垂直

.box{
    padding-left:100px;
    padding-right:100px;
    border:10px red solid;
}

---

.box{
    margin-left:100px;
    margin-right:100px;
}

---

display和visibility

a{
  width:100px;
  height:100px;
  display:none;
}
none:此元素不会被显示

把内联元素转成块元素

a{
  width:100px;
  height:100px;
  display:block;
}

---

a{
  width:100px;
  height:100px;
  display:inline-block;
}
行内块元素

visibility

.box{
    width:100px;
    height:100px;
    background-color:orange;
    visibility:hidden;
}

• display的none和visibility的hidden有什么相同点和不同点?

display的none和visibility的hidden相同点是都会让元素消失隐藏不见
display的none和visibility的hidden不同点是display的none是占地方的而visibility的hidde是不占地方的。