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" /> ...
随机推荐
- hdu 2114 Calculate S(n) 数论(简单题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2114 自己对数论一窍不通啊现在,做了一道水题,贴出来吧...主要是让自己记住这个公式: 前n项和的立方 ...
- Linux部分命令及通配符用法
pwd: 显示工作目录 cd -: 在上一次所在目录与当前目录之间来回切换 cd: 切换回家目录 cat: 文本查看工具 -n:给显示的文本行编号 passwd 修改用户的密码 which 查看系统 ...
- 为Android内核添加新驱动
转载地址:http://blog.chinaunix.net/uid-16759545-id-4892379.html 1. 在drives目录下添加hello目录,内含hello.c Kconfig ...
- smarty的学习计划（1）
1.什么事smarty? 不知道,smarty是一个使用PHP写出来的模板引擎,它提供了逻辑外在内容的分离 2.smarty优点: a.速度:成熟的模板引擎技术 b.编译型:采用smarty编写的程序 ...
- SpringMVC中的@Controller和@RequestMapping到底什么鬼？
1.1 @Controller是什么 首先看个例子: @Controller @RequestMapping("/blog") public class BlogControlle ...
- hive网站日志数据分析
一.说在前面的话 上一篇,楼主介绍了使用flume集群来模拟网站产生的日志数据收集到hdfs.但我们所采集的日志数据是不规则的,同时也包含了许多无用的日志.当需要分析一些核心指标来满足系统业务决策的时 ...
- 《安卓网络编程》之第三篇 使用Apache接口
在Android系统中,提供了一下三种通信接口: 标准的Java 接口:java.net Apache接口:org.apache.http Android网络接口:android.net.http 在 ...
- 三、 添加视图View（ASP.NET MVC5 系列）
在这一章节我们可以修改HelloWorldController类,通过使用视图模板来封装处理产生给客户端的HTML响应. 我们将使用Razor View engine来创建视图文件.基于Razor的视 ...
- OpenCV探索之路（十五）：角点检测
角点检测是计算机视觉系统中用来获取图像特征的一种方法.我们都常说,这幅图像很有特点,但是一问他到底有哪些特点,或者这幅图有哪些特征可以让你一下子就识别出该物体,你可能就说不出来了.其实说图像的特征,你 ...
- Segmentation Faul
转自:http://www.cnblogs.com/panfeng412/archive/2011/11/06/segmentation-fault-in-linux.html