以往我们写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. iftop 安装以及相关参数及说明（转载自csdn）

      转载自http://blog.csdn.net/cqinter/article/details/6250211 关于 Iftop iftop 是类似于top的实时流量监控工具.主要用来显示本机网络 ...

  2. JavaScript侧边悬浮框

    <script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...

  3. CvMat结构

    一.创建矩阵的方式: 1.cvCreateMat(int rows,int cols,int type),Type可以使任何预定义类型.Type的写法规则:CV_<bit_depth>(S ...

  4. (转)COM组件里的AddRef（）

    D3D是 COM组件,它在服务进程中运行,而不在当前的客户进程中.在DX组件运行过程中,要创建一系列接口对象,如CreateDevice()返回接口指针,这些接口及其占用内存什么时候释放,要通过“引用 ...

  5. 用MFC如何对子对话框进行初始化

    通常情况下,我们在创建子对话框的类时.cpp文件中并不会自动生成initdialog函数,但我们的很多操作都需要用到initdialog初始化函数,如果你直接在类的头文件中去定义一个初始化函数,然后在 ...

  6. 使用sublime遇到的问题汇总

    问题一:用GBK编码的文件用Sublime打开出现中文乱码的解决办法: 通过ctrl+shift+p--package control install安装插件"ConvertToUTF8&q ...

  7. 三级联动(在YII框架中)

    //三级联动 //数据库代码过多就不上传了 //视图 <div class="area">    <table class="table"&g ...

  8. string.join(iterable)

    str.join(iterable) Return a string which is concatenation the  of the strings in the iterable iterab ...

  9. OkHttp和Volley对比

    OkHttp 物理质量 使用OkHttp需要 okio.jar (80k), okhttp.jar(330k)这2个jar包,总大小差不多400k,加上自己的封装,差不多得410k. 功能介绍 Squ ...

  10. 041. asp.net中内容页访问母版页中的控件

    母版页运行机制: 用户通过输入内容也的URL来请求某个页面, 获取该页面后, 读取@Page指令, 如果该指令引用了一个母版页, 则也读取该母版页, 如果也是第一次请求这两个页面, 则母版页和被请求的 ...