以往我们写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. haslayout

    什么是 haslayout ? haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explorer中,一个元素要么自己对自身的内容 ...

  2. 关于Kean博客的学习

    由于我从事设计行业,使用Autocad进行绘图是一件单调但是拥有乐趣的工作. 大约在一年前,接触到了CAD的二次开发的内容,它使我感到新奇,并且决定花时间来研究相关的知识.这时我在网上浏览到了Kean ...

  3. Java进阶（三）多线程开发关键技术

    原创文章,同步发自作者个人博客,转载请务必以超链接形式在文章开头处注明出处http://www.jasongj.com/java/multi_thread/. sleep和wait到底什么区别 其实这 ...

  4. C++ 中queue（队列）的用法

    #include <iostream>#include <queue>#include <assert.h>/*调用的时候要有头文件: #include<st ...

  5. 周末发现一个BUG,时有时无,一出程序就崩溃,郁闷了好久,终于跟出来来了,记之,提醒自己今后一定规范编写,只要规范,绝对不会出问题

    -- :::] cell0 create -- :::] *** Assertion failure /UITableView.m: -- :::] [ Uncaught Exception ] Na ...

  6. 通过配置文件启动odoo-10.0

    odoo-10.0文件夹中找到odoo-bin,这是10.0的启动文件,也是一个py文件 使用pycharm启动后,找到run->edit configuration 找到odoo-bin 找到 ...

  7. System.DateUtils 4. IsValidDateTime... 有效时间判断

    编译版本:Delphi XE7 function IsValidDate(const AYear, AMonth, ADay: Word): Boolean;function IsValidTime( ...

  8. UVA-11517 Exact Change(DP)

    题目大意:有n张钞票,面值可能不同.你要买一件东西,可能需要找零钱.问最少付多少钱,并求出最少的钞票张数. 题目分析:定义状态dp(i,w)表示前i张钞票凑成w元需要的最少钞票张数.则状态转移方程为d ...

  9. Base64加密与MD5的区别？

    MD5是一种不可逆的摘要算法.而Base64是一种编码方式,主要用于将二进制数据转换为文本数据,方便使用HTTP协议等,是可逆的.无论多少二进制数据,在MD5算法一定的情况下,都会变成一个定长的数据, ...

  10. 使用OpenLDAP构建基础账号系统

    LDAP - Lightweight Directory Access Protocol,对该协议的具体应用,常见的是微软的Active Directory服务和Linux上的OpenLDAP组件. ...