以往我们写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默认原始的样子的更多相关文章

  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. Techparty-广州 10 月 31 日 Docker 专场沙龙 后记

    华为的童鞋技术能力很强,但是两位讲师的都没听进去.重点听了两个,一个是芒果TV的Docker 之路,另一个是Coding的实践和思考. 芒果TV的主讲人是一直仰慕的CMGS,从豆瓣出来后去了国企芒果台 ...

  2. Linux软件的安装方法！！！

    1.yum/rpm(*.rpm) 包管理器:直接yum/rpm安装. 优点:是全自动化安装,不需要为依赖问题发愁,缺点是自主性太差,软件的功能.存放位置固定,不易变更. 2.源码包(*.tar.gz) ...

  3. Bullet核心类介绍（Bullet 2.82 HelloWorld程序及其详解，附程序代码）

    实验平台:win7,VS2010 先上结果截图: 文章最后附有生成该图的程序. 1. 刚体模拟原理 Bullet作为一个物理引擎,其任务就是刚体模拟(还有可变形体模拟).刚体模拟,就是要计算预测物体的 ...

  4. 特性Atrribute和枚举

    特性的简单实用!特性存放在metedata里面,它离不开反射. Program.cs class Program { static void Main(string[] args) { Console ...

  5. Swiper 中文API手册（share）

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  6. HDFS的工作原理（读和写操作）

    工作原理: NameNode和DateNode,NameNode相当于一个管理者,它管理集群内的DataNode,当客户发送请求过来后,NameNode会 根据情况指定存储到哪些DataNode上,而 ...

  7. Git分布式版本管理工具基本使用方法

    一.Git简介 早先linux内核代码托管在BitKeeper,这个是商业的,但是免费给linux社区使用: linux社区有个人试图破解BitKeeper,被BitKeeper发现后不再免费提供使用 ...

  8. js的一点

    1.js中实现继承的方法 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"&g ...

  9. 跟我学Windows Azure 三 使用vs2013创建windows azure web site

    首先我们需要登陆我们的windows azure上,然后访问 https://manage.windowsazure.cn/publishsettings/index 他会让我们下载我们的订阅证书文件 ...

  10. python之购物车的编写（熬夜撸代码中。。。）

    购物车的编写对于我这种不是很精通函数的小白来说,简直太难了.各种坑,各种无奈啊!不过总算也是写出来了! 不多说,直接上代码! #!/usr/bin/env python#用户名 sanjiang#密码 ...