input submit标签的高度和宽度与input text的差异

<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;}

转载于:https://www.cnblogs.com/is-jackwen/p/10926416.html

input submit标签的高度和宽度与input text的差异相关推荐

html超级链接大小修改,html代码如何为超链接标签设置高度和宽度呢？
摘要: 下文讲述html中设置超链接标签的高度和宽度的方法分享,如下所示: 有时候我们需要为"超链接"标签设置相应的高度和宽度,但是设置后,我们发现超链接标签没有发生任何变化,具体 ...
html a标签怎样设置宽高,a标签如何设置高度和宽度
我们直接设置html代码中的a标签高度和宽度是不会起作用的,这是因为a标签属于内联元素标签,而内联元素不支持设置宽度(width)和高度(height),那么, a 标签如何设置宽度和高度. 为什么设 ...
HTML基本结构标签列表表格表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构网页的基本标签标题标签段落标签换行标签水平线字体样式标签 HTML注释和特殊符号图像标签常见的图片格式语法案例链接标签页面间链接语法锚链 ...
css设置元素继承父元素宽度_CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度第一种情况:元素为文档流中元素 dd dd dd 结论1:把子元素定位换成position:relative与上述例子表现一样,因此在元素不设宽度时,若元素为文档流中元素,则此元素继 ...
14、HTML ＜input＞标签
上一节我们说过关于表单的所有内容需要放在 <form> 标签中,这节我们就来看一下<form> 标签内部具体可以放哪些标签(内容)呢? 在HTML 中,<form> ...
BOM 浏览器窗口尺寸浏览器的弹出层浏览器的地址栏浏览器的历史记录浏览器的版本信息浏览器的常见事件浏览器卷去的高度和宽度
浏览器窗口尺寸 + 指的是浏览器可视窗口的尺寸 + 浏览器可能会出现滚动条=> 在一般浏览器中,滚动条算浏览器的一部分=> 在MAC中的safari浏览器上,是不算的滚动条是隐形的 + ...
html高度随宽度编号,纯css实现容器高度随宽度等比例变化的四种解决方案
使用一个隐藏的图片来实现这个方法是我最推荐的,因为不需要考虑任何兼容性,PC移动完美运行.除了增加了一个dom结构,但是相对与一个页面成百上千的代码来说,不值一提我们知道,div容器如果不给定高度 ...
java jtextfield 高度_java - 固定的JTextField的高度和宽度 - 堆栈内存溢出
我最近一直在使用Java Swing,当我尝试在彼此之间添加3个JTextField时,它们会填充整个JFrame. 但是我希望它们具有固定的高度和宽度. 我能做什么? 由于我是该主题的新手,因此我无 ...
第P题扔盘子（双重循环就行）详解=====有一口井，井的高度为N，每隔1个单位它的宽度有变化。现在从井口往下面扔圆盘，如果圆盘的宽度大于井在某个高度的宽度
有一口井,井的高度为N,每隔1个单位它的宽度有变化.现在从井口往下面扔圆盘,如果圆盘的宽度大于井在某个高度的宽度,则圆盘被卡住(恰好等于的话会下去). 盘子有几种命运:1.掉到井底.2.被卡住.3.落 ...
容器高度或者宽度的获取方式
为了使表格或者一些数据能能够自适应浏览器的宽度或者高度,就不可避免的要获取浏览器的尺寸电脑屏幕尺寸的获取方式 window.screen.height //获取电脑屏幕分辨率的高度 window.s ...

input submit标签的高度和宽度与input text的差异

input submit标签的高度和宽度与input text的差异相关推荐

最新文章

热门文章