inline-block布局错位问题

如图, 两个display为 inline-block的元素,会出现情况

针对第三种情况:

需要添加

vertical-align: top;

参考代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.test {
    border: 1px solid black;
    height: 50px;
    line-height: 50px;
    width: 50px;
    display: inline-block;
    /* vertical-align: top; */
}
</style>
<title></title>
</head>
<body>
<span class="test"></span>
<span class="test">123</span>

</body>
</html>

时间： 2024-10-30 01:09:21

inline-block布局错位问题的相关文章

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等. 四.一般使用display:block与display:inline来改变元素的

inline,block,inline-block解析

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

关于 inline block 元素之间的空格

本篇文章由:http://xinpure.com/about-the-inline-block-element-between-spaces/ 说点什么 display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结以下方法不保证浏览器兼容性问

3个简单的页面布局示例

示例代码 -1 (利用HTML5标签及浮动布局) <style> header nav ul { margin: 15px; list-style: none; height: 50px; } header nav ul li { font-size: 1.5em; color: coral; margin: 10px; float: left; } header nav ul li a { text-decoration: none; } aside { margin-right: 50px

[CSS3] CSS Display Property: Block, Inline-Block, and Inline

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left middle right 但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

css3的flex布局

今天看到百度前端学院有关于flex布局方面的内容,就看了下flex布局,顺便做下总结,方便自己以后看.内容大概分几个方面,一.flex布局的好处以及应用场景:二.原理:三.基本内容:四.demo: 一.flex布局的好处以及应用场景: flex好处就是灵活方便,大多应用在移动端,pc端由于兼容问题应用不太广泛. 二.原理: 说到原理说神马呢?先说下常见的布局吧:一.固定布局:就是宽高都固定的那种,width:500px;height:100px;二.流体式布局:width:100%;height