input 等替换元素的baseline问题
行内标签和设置为block:inline;形式的标签与input并排放置时，为何会错位？例如下面的。
因为在同一行中，所有行内元素默认 baseline 对齐。但是，input（还有textarea、select、object等替换元素）这种替换元素的 baseline 并没有在元素底部。如图：
设置vertical-align: top或者bottom，就能使得所有元素的baseline在同一线上。或者设置非替换元素的line-height。
引自知乎https://www.zhihu.com/question/26778887，貘吃馍香同学的回答，如有侵权，联系我立删。
input 等替换元素的baseline问题的更多相关文章
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- html中label宽度设置、非替换元素和替换元素
<label ></label> 单独对label设置一个width:100px的属性石不起作用的,和float:left或者display:inline-block配合的话 ...
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
- css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- CSS基础：替换元素和非替换元素
简介 根据 "外在盒子" 是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素.这种通过修改某个属性值,例如 &l ...
- html 替换元素
参考博客:http://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html 可替换元素也是行内元素 替换元素是浏览器根据其标签的元素与属性来判 ...
- CSS float与clear & 替换元素与非替换元素
css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...
- html元素两种分类。替换元素和不可替换元素；块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- CSS 替换元素和非替换元素 行内非替换元素
html元素也可以分为替换元素和非替换元素 1.替换元素 替换元素是由浏览器根据表示的元素和属性决定显示的内容. 例如:<img src="./image.jpg" /> ...
随机推荐
- Java学习笔记——设计模式之五.工厂方法
水边一只青蛙在笑 --石头和水 工厂方法模式(Factory Method),定义了一个用于创建对象的接口,让实现类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 这里在简单和工厂的基础上 ...
- maven私服nexus搭建（windows）
1.下载nexus 地址:https://www.sonatype.com/download-oss-sonatype 下载相应版本的zip包. 2.安装nexus 下载完成后,解压到本地任意目录. ...
- pod lib lint 遇到的问题
在pod lib lint(Xcode 8.3.2)校验组件是否有效的时候报了如下错误: - ERROR | [iOS] unknown: Encountered an unknown error ( ...
- 使用函数指针调用C++虚函数
基本概念: 1. 函数指针,一个地址指针变量,其值指向代码区的某个函数首地址. 2. 虚函数,可以被子类覆写的C++成员函数.由虚函数表实现. 3. 虚函数表指针(vpt),指向虚函数表首地址的指针, ...
- python selenium 元素定位（三）
上两篇的博文中介绍了python selenium的环境搭建和编写的第一个自动化测试脚本,从第二篇的例子中看出来再做UI级别的自动化测试的时候,有一个至关重要的因素,那就是元素的定位,只有从页面上找到 ...
- FiddlerScript高级技巧---自定义Fiddler菜单
Tips 书接上回, Fiddler插件 在团队内部试用后,效果很不错,小伙伴们也提出了很多改进的建议: 最近一段Fiddler使用的仍较为频繁,以前碰到一些特殊测试需求时,总是自己在FiddlerS ...
- 11.Java 加解密技术系列之 总结
Java 加解密技术系列之 总结 序 背景 分类 常用算法 原理 关于代码 结束语 序 上一篇文章中简单的介绍了第二种非对称加密算法 — — DH,这种算法也经常被叫做密钥交换协议,它主要是针对密钥的 ...
- OpenCV探索之路（十六）：图像矫正技术深入探讨
刚进入实验室导师就交给我一个任务,就是让我设计算法给图像进行矫正.哎呀,我不太会图像这块啊,不过还是接下来了,硬着头皮开干吧! 那什么是图像的矫正呢?举个例子就好明白了. 我的好朋友小明给我拍了这几张 ...
- DelayQueue使用
假设现有如下的使用场景: a) 关闭空闲连接.服务器中,有很多客户端的连接,空闲一段时间之后需要关闭之. b) 缓存.缓存中的对象,超过了空闲时间,需要从缓存中移出. c) 任务超时处理.在网络协议滑 ...
- Spring 5.0.0.RC1 - CORS Support 【译文】
3 CORS支持 3.1 介绍 出于安全考虑,浏览器禁止对当前源之外的资源进行AJAX调用.例如,当你在一个标签页检查你的银行账户时,你可以在另一个标签页打开evil.com的网站.在evil.com ...