<input type="text"> 时设置input的高度和border,最后元素的高度和宽度包含了border的值。

<input type="submit">时同样设置了input的高度和border宽度值,但是最后input显示的高度值仅为input css代码设定的高度值。

如下所示:CSS中Input height设置为18px,border设置了1px,但是最后input显示高度为18px,与旁边的input  text高度没有对齐。

.rightarea .form .submit{width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}

根据www.w3school.com.cn的css说明:

解决这个问题,可以运用box sizing。

在submit样式表中加入:box-sizing:content-box,最后的代码如下:

.rightarea .form .submit{box-sizing: content-box;-moz-box-sizing: content-box;/* Firefox */-webkit-box-sizing: content-box;/* Safari */width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}

input submit标签的高度和宽度与input text的差异的更多相关文章

  1. <iframe>标签自适应高度和宽度

    <iframe src="index.html" id="iframepage" frameborder="0" scrolling= ...

  2. WordPress 去除图片img标签的高度与宽度

    要求 如,在桌面设备上,图片使用的是以下的HTML代码:  代码如下 复制代码 1  <img src="abc.png" alt="abc" width ...

  3. iframe 标签自适应高度和宽度

    iframe 结构如下 <iframe src="index.html" id="frame" frameborder="0" scr ...

  4. jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

    jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...

  5. html之input系列标签

    input属性太多,我这里仅列出几个我喜欢的吧. disabled:首次加载时禁用此元素 checked:首次加载时选中此元素 form:输入字段所属的一个或多个表单 hieght:定义input字段 ...

  6. 转:CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     < ...

  7. CSS实现高度和宽度自适应

    其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...

  8. HTML:Input元素标签的详细介绍

    总结Input的标签: Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是t ...

  9. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...

随机推荐

  1. yield函数的执行顺序

    例子: 上图中标明了  行号出现的顺序 从顺序中可以看到 1.开始先执行for循环,执行到93行yield_test(1)时,会调用函数yield_test(),所以打印了79行内容 2.到80行时, ...

  2. C#中的事件注册和注销

    C#中的事件注册和注销 由于.NET框架对消息循环机制进行了很好的封装,开发人员不再需要深入的了解Windows事件/消息实现的具体机制,也无需创建复杂的事件结构体和所谓的消息句柄.我们所要做的无非就 ...

  3. 从0开始学习 GitHub 系列之「01.初识 GitHub

    转载:http://blog.csdn.net/googdev/article/details/52787516 1. 写在前面 我一直认为 GitHub 是程序员必备技能,程序员应该没有不知道 Gi ...

  4. golang之下载安装配置

    1.下载:根据操作系统和计算架构选择合适的安装包,操作系统类型有linux.mac.windows等,计算架构分为32位的386计算架构和64位的amd64计算架构 2.安装:推荐安装到 /usr/l ...

  5. qt绘制渐变区域

    // 原理:通过点到线,然后叠加成区域.同理,可使用其他图形 QPainter painter(m_pWidget); QLinearGradient linearGradient(QPointF(, ...

  6. 仿Google Nexus菜单样式

    在线演示 本地下载

  7. Java练习 SDUT-2271_Eddy的难题

    Eddy的难题 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全 ...

  8. retailMall-vuedemo1

    //home.vue <template> <div class="home"> <div class="top-info"> ...

  9. “龙井”开箱评测 |Alibaba Dragonwell 新手上路指南

    作者|阿里云智能事业群 高级技术专家 陆传胜 阿里巴巴有着最丰富的 Java 应用场景,覆盖电商,金融,物流等众多领域,是世界上最大的 Java 用户之一. 2019 年 3 月 21 日,阿里巴巴在 ...

  10. LeedCode OJ --- Binary Tree Inorder Traversal

    点击打开题目链接 今天只是写了递归的版本,因为还没想好怎么用迭代来实现,可以写的过程中,有一点是有疑问的,虽然我的代码可以AC. 问题是:主调函数是可以使用子函数中返回的在子函数中定义的vector. ...