以往我们写css时,让一行文字垂直居中.

会设置line-height等于height比如:

当我把这个原理 放在button上时  会是这个样子的.

以下都是火狐浏览器环境

有没有发现一个现象,他们好像并没有垂直居中.

如果你不确定有没有垂直居中再看以一幅图片:

这里把line-height给注释掉.文字会向上移动.

这里如果把height:30px给干掉,只写line-height:30px

通过上图我们发现 在不设置高度的时候,会在line-height上加了两个像素.

现在我们拿一个清理后的button和一个span标签作对比.

  1. <input style="padding:0;margin:0;border: none;background-color: red;font-size: 16px;font-family: '微软雅黑';" type="button" value="默认"/>
  2. <span style="background-color: red;font-size: 16px;font-family: '微软雅黑';">默认</span>

这个时候我们明显发现在没有设置高度的情况下,按钮总是比普通的标签要高出2个像素

结论:在没有设置高度的情况下,按钮总是比普通的标签要高出2个像素,宽度也是大2个像素,同时在没有line-height限制的前提下,会默认垂直居中.

css中 input的button默认原始的样子的更多相关文章

  1. css中input与button在一行高度不一致的解决方法

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...

  2. asp.net中<input type=button>无法调用后台函数

    例如:用<input id="bt1" type="button" runat="server" Onclick="btnL ...

  3. CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习

    CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr(&q ...

  4. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  5. css取消input、select默认样式(手机端)

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  6. css 中input和select混排对齐问题

    当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,一个vertical-align:middle就可搞定.

  7. css中input框不可点击+首行缩进

    Css 1)text-indent::首行缩进 2)disabled="true"设置input框不可以点击 3)Css:xx!important:声明提前优先级最高..!impo ...

  8. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  9. HTML中input和button设置同样高度却不能等高的原因

    同样设置35px,input略显高: input加个样式就行 box-sizing: border-box;

随机推荐

  1. HttpContext.Current.User is null after installing .NET Framework 4.5

    故障原因:从framework4.0到framework4.5的升级过程中,原有的form认证方式发生了变化,所以不再支持User.Identity.Name原有存储模式(基于cookie),要恢复这 ...

  2. ionic 打包签名

    IONIC用一下命令打包会自动签名并且打包 ionic build android 自己签名并且打包方法: 1>在你项目app\platforms\android目录下新建文件:debug-si ...

  3. C#编程语言与面向对象——类与对象

    由于ASP.NET技术是全面向对象的,因此,要掌握这一技术,必须具备有扎实的面向对象理论基础 使用C#编程,所有的程序代码几乎都放在类中,不存在独立于类中之外的函数,因此,类是面向对象编程的基本单元 ...

  4. Java设计模式(一) 简单工厂模式不简单

    摘要:本文介绍了简单工厂模式的概念,优缺点,实现方式,以及结合Annotation和反射的改良方案(让简单工厂模式不简单).同时介绍了简单工厂模式(未)遵循的OOP原则.最后给出了简单工厂模式在JDB ...

  5. SQL组合查询的存储过程写法

    最进一个项目 里面有个查询的功能,它是进行组合查询的, 而且用的是存储过程写.写这样的存储过程,需要注意单引号的使用,请看本人下面的例子,假如你以后写的话 记得注意写就行: create proc s ...

  6. (转) Spring框架笔记(二十五)——NamedParameterJdbcTemplate与具名参数(转)

    在经典的 JDBC 用法中, SQL 参数是用占位符 ? 表示,并且受到位置的限制. 定位参数的问题在于, 一旦参数的顺序发生变化, 就必须改变参数绑定. 在 Spring JDBC 框架中, 绑定 ...

  7. Map练习错误

    private Student findStuByNumber(String number) {              Student student=null ;       for(Stude ...

  8. keepalived+nginx配置文件及检查nginx服务的脚本

    脚本一启动的速度要快一些哦,因为脚本二要判断两次以后才启动哎 这两个一般配合keepalived使用 脚本一: #!/bin/bash #author:fansik #description:chec ...

  9. 刷题ING...

    我用codeVS刷题.. 努力准备!!

  10. C# Redis Server分布式缓存编程 --网络转载

    这篇文章我将介绍如果用最简洁的方式配置Redis Server, 以及如何使用C#和它交互编程 一. 背景介绍 Redis是最快的key-value分布式缓存之一 缺点: 没有本地数据缓冲, 目前还没 ...