css中 input的button默认原始的样子
以往我们写css时,让一行文字垂直居中.
会设置line-height等于height比如:
当我把这个原理 放在button上时 会是这个样子的.
以下都是火狐浏览器环境
有没有发现一个现象,他们好像并没有垂直居中.
如果你不确定有没有垂直居中再看以一幅图片:
这里把line-height给注释掉.文字会向上移动.
这里如果把height:30px给干掉,只写line-height:30px
通过上图我们发现 在不设置高度的时候,会在line-height上加了两个像素.
现在我们拿一个清理后的button和一个span标签作对比.
<input style="padding:0;margin:0;border: none;background-color: red;font-size: 16px;font-family: '微软雅黑';" type="button" value="默认"/>
<span style="background-color: red;font-size: 16px;font-family: '微软雅黑';">默认</span>
这个时候我们明显发现在没有设置高度的情况下,按钮总是比普通的标签要高出2个像素
结论:在没有设置高度的情况下,按钮总是比普通的标签要高出2个像素,宽度也是大2个像素,同时在没有line-height限制的前提下,会默认垂直居中.
css中 input的button默认原始的样子的更多相关文章
- css中input与button在一行高度不一致的解决方法
在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...
- asp.net中<input type=button>无法调用后台函数
例如:用<input id="bt1" type="button" runat="server" Onclick="btnL ...
- CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习
CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr(&q ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css取消input、select默认样式(手机端)
IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...
- css 中input和select混排对齐问题
当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,一个vertical-align:middle就可搞定.
- css中input框不可点击+首行缩进
Css 1)text-indent::首行缩进 2)disabled="true"设置input框不可以点击 3)Css:xx!important:声明提前优先级最高..!impo ...
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- HTML中input和button设置同样高度却不能等高的原因
同样设置35px,input略显高: input加个样式就行 box-sizing: border-box;
随机推荐
- Myelipcse导入Maven项目: version of spring facet could not be detected
在导入已存在的maven web项目的时候,总是出现Versions of Spring facet could not be detected的问题. 查资料知道有两种解决方法:一个是什么在项目根目 ...
- android颜色指列表
<?xml version="1.0" encoding="utf-8" ?> 2 <resources> 3 <color na ...
- dede 优化打开速度
织梦DedeCMS本地后台运行速度慢 不知道从什么时候开始,织梦DedeCMS在本地PHP环境进行测试的时候,后台的运行反应会非常的慢,经常过了很久都没有反应.运行很久之后,还会出现了“\includ ...
- mysql常用操作
一.什么是数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. SQL( Structured Query Language)语言的全称是结构化查询语言.数据库管理系统通过S ...
- 第七章 LED将为我们闪烁:控制发光二极管
第七章 LED将为我们闪烁:控制发光二极管 本章我们将会看到一个完整的linux驱动程序,通过linux驱动程序控制LED的四个小灯,通俗的说就是通过向linux驱动程序来控制LED小灯的开关.用到 ...
- PullToRefreshGridView刷新加载
<com.handmark.pulltorefresh.library.PullToRefreshGridView xmlns:ptr="http://schemas.a ...
- Visual Studio 创建C++或C#Windows程序
使用工具Visual Studio,创建一个C++或C#Windows程序,在主窗口中显示“Hello World”,用户可以用鼠标拖动“Hello World”在主窗口中移动 首先创建一个项目 选 ...
- linux 下调试 汇编
gcc: -c 编译后汇编,不连接 -S 编译后停止,不进行汇编 -o 编译,汇编,连接 -g 生成调试信息 -gstabs 标识符 main gdb break *标识符 :设置断点 info re ...
- 《Matrix Computation 3rd》读书笔记——第2章 矩阵分析
- Java中避免表单重复提交
表单的重复提交: 没有完整的进行一次,先请求表单页面->再提交表单过程而完成数据提交 造成的根本原因: 没有完整的进行一次,先请求表单页面->再提交表单过程. 造成重复提交的现象: 由于服 ...