一、典型代表

  • input
  • img

二、特点:

  • 在一行上显示
  • 可以设置宽高
<style type="text/css">
img{
width: 300px;
/* 顶部对齐 */
vertical-align: top;
}
input{
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<img src="../2.26/picture.jpg" alt="">
<input type="text">
</body>
  • 补充:行内块与行内块之间的空隙:如果两个span在HTML这样放置,会出现空隙,使用浮动可以去除这种间隙.
span {/*span转换为行内块,设置300宽高和黑色边框*/
display: inline-block;
border: 1px solid #000;
width: 300px;
height: 300px;
}
<body>
<span></span>
<span></span>
</body>

CSS行内块元素(内联元素)-LMLPHP

<body>
<span></span><span></span>
</body>

CSS行内块元素(内联元素)-LMLPHP

05-08 15:28