CSS行内块元素

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

一、典型代表

  • 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>

  • 如果两个span一列排列,则之间会有2px的边框,变细可以使用负的margin值
<body>
    <span></span><span></span>
</body>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容