HTML/CSS 问题。 我已经写了几天的网络应用程序。我遇到了一个小问题：
任何“input type=text”区域的高度突然变成了大约 35 像素高，而过去只有大约 20 像素。奇怪的是，我认为我的代码中没有任何更改。
那么，顺便说一句，有没有人知道改变该区域高度的方法（似乎 CSS“高度”属性没有效果，除非我误用了它）？
提前致谢。
【问题讨论】：
height 不改的话就不行，但是你也试试padding？，这可能是问题的原因
如果您无法更改 height 属性（可能使用 !important 除外），我假设您正在使用像 f.e. 这样的 css 框架。引导程序，它为您的输入提供特定的高度，或者可能（更有可能）填充。
但请注意共享一些代码，以便我们了解您要查找的内容。
编辑：鉴于您的屏幕截图，我真的假设您的所有输入都有一定的填充。请检查一下。
【讨论】：
如果我必须插入的代码有点长，我很抱歉，但应用程序确实很长。 所以这里有2个部分： 1 : 应用的全局 CSS sheet
2 : 我遇到问题的 HTML 对象
第 1 部分 - CSS - 应用程序的全局 CSS 表：
body {margin:0;font-family:'Helvetica';font-size:0.8em;color:black;background-color:#DDD;}
a {text-decoration:none;color:black;padding:3px 20px;}
a:hover {color:#FFF;background-image:url('../images/curseur.jpg');}
button {margin:0;padding:0;}
.creux {border:2px solid;border-top-color:#666;border-left-color:#666;border-right-color:#FFF;border-bottom-color:#FFF;}
.relief {border:2px solid;border-top-color:#EEE;border-left-color:#EEE;border-right-color:#666;border-bottom-color:#666;}
.lien {color:#008;text-decoration:underline;cursor:pointer;}
.boutIcone {padding:0;width:20px;height:20px;border:2px solid;border-top-color:#EEE;border-left-color:#EEE;border-right-color:#666;border-bottom-color:#666;}
.imBouton {position:relative;left:0px;top:-1px;width:16px;}
.fl {float:left}
.libIn {float:left;text-align:right}
input {height:20px;}
#ecran {position: absolute;top: 0;width: 100%;height:850px;background-color: #FFF;}
/*bandeau*/
#bandeau {position:absolute;top:0;width:100%;height:72px;text-align:center;font-family:'Tahoma';}
#imBandeau {position:absolute;top:0;left:0;width:100%;height:100%;}
#logo {position:absolute;top:3px;left:3px;width:150px;height:60px;}
/* etiquette */
#etiquette {position:absolute;top:0;left:0;width:100%}
#titre {position:relative;font-size:2em;font-weight:bold;top:7px;}
#sousTitre {position:relative;font-weight:bold;font-size:12px;top:5px;}
#signature {position:relative;font-size:9px;top:6px;font-family:Helvetica;font-weight:200;}
/* fin etiquette */
/* fin bandeau */
/* gestion des menus */
#espaceMenus {position:absolute;top:0;width:100%;z-index:12;}
#barreMenu {position:absolute;top:0;left:0;width:100%;height:34px;font-size:16px;border:0;font-family:Tahoma}
#barreTexte {position:relative;top:-30px;left:2px;padding:2px 0;}
#barreTexte a{display:inline;padding:4px 20px;}
#barreFond {width:100%;height:30px;}
#menus {position:absolute;top:27px;z-index:14;font-size:16px}
#menus a {display:block;position:relative;padding:4px 3px;z-index:14}
.icoMenu {border:0;padding: 1px 3px 0 0;margin:0 0 -4px;}
.logoMenu {position:relative;float:right;border:0;top:2px;}
.barreMx {position:absolute;top:6px;width:25em;background-image:url('../images/plaqueFond.jpg');border-right:2px solid;border-bottom:2px solid;border-right-color:#666;border-bottom-color:#666;z-index:13;}
.barreMxMx {background-image:url('../images/plaquefond.jpg');width:25em;position: absolute;top:30px;margin:0.35em 0 0.5em 0;z-index:13;}
/*fin gestion des menus */
/* barre de titre */
.barreTitre {height:24px;background-image:url('../images/barretitre.jpg');color:#21B;font-weight:bold;font-size:12px;}
.titreBarre {position:relative;margin:10px;top:3px;}
.rtBout {position:relative;width:22px;height:22px;float:right;border:2px solid;border-top-color:#EEE;border-left-color:#EEE;border-right-color:#666;border-bottom-color:#666;}
.lfIcon {position:relative;left:2px;top:3px;float:left;}
/* Fin barre de titre ------------ */
/* Objets génériques du gridview */
#tbFiltre {position:absolute;background-color:#DFD;width:700px;left:25%;top:100px;float:left;font-size:0.9em;}
#tbFiltre td {background-color:#EEE; }
#rubriques td {text-align:center;}
.gvEntete {width:100%;height:25px;font-weight:bold;}
.gvLigTit {background-color:#D8D8D8} /* lignes de titres */
.gvLig0 {background-color:#DDD} /* lignes paires du gridview */
.gvLig1 {background-color:#FFF} /* lignes impaires du gridview */
.gvTableau {position:relative;border-spacing:0px;width:100%;border:1px solid #000;border-collapse:collapse;}
.gvTableau td {height:12px;border:1px solid #000;font-family: arial;font-size:0.8em;height:14px;}
/* #barreCol {z-index:11;position:absolute;top:45px;} */
/* fin Objets génériques du gridview */
/* --- Calendrier --- */
.calend {border-collapse:collapse;}
.calend td {border:1px solid black;text-align:center;}
.calMouv {background-color:#BBA; color:#FFF;font-weight:bold;text-align:center;}
.calMouv button{width:100%;font-size:0.70em;}
.semaine {font-style:italic;color:#070;text-align:center;font-weight:bold;width:33px;}
.colRouge {font-weight:bold;color:#A00;}
/* --- fin du calendrier --- */
#messAttente {position:fixed;top:300px;left:340px;width:340px; height:80px; background-color:#DDE; z-index:7; display:none;}
/* ----- Menus versatiles composés à partir d'une Apile ------ */
.menuVersat {font-size:14px}
/* ------------------- Page de recherche html -------------------*/
.lienRecherche {font-weight: bold;text-decoration: underline;color: blue;}
.lbCreux {position:relative;color:#FFE;border:2px solid;border-top-color:#666;border-left-color:#666;border-right-color:#FFF;border-bottom-color:#FFF;}
#salut{position:relative;top:40px;margin-left:10px}
PART 2 - HTML - THE DIV "MODLOCAT" THAT I WAS WRITING WHEN THE PROBLEM OCCURRED:
<div id="modLocat" class="relief" style="width:750px;height:560px;background-color:#EEE;">
<!-- barre de titre -->
<div id='barTit' class='barreTitre' style='width:100%;'>
<img src='icones/MonMotif.ico' class='lfIcon'>
<button class='rtBout' onclick='popFen();'><img src='icones/croixrouge.ico'></button>
<button class='rtBout' onclick='passeEcrEch();'><img src='icones/encochevertolive.ico' title="Passer les écritures sélectionnées"></button>
<span class='titreBarre'>Modification de location</span>
<div style="clear:both;"></div>
</div>
<!-- fin de la barre de titre -->
<br>
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:80px">Locataire: </div>
<select id='ddLoc' class='ddl' onchange='selLoc();' style='float:left;width:180px;' size='1'> </select>
<button class='boutIcone' style="position:relative;left:3px;float:left;top:-2px" onclick='modifLocation();'><img src='icones/croixrouge.ico'></button>
<div style="float:left;width:20px"> </div>
<div style="float:left;position:relative;left:5px">Appartement: </div>
<div id="dic..appart$" class="lbCreux" style="float:left;width:340px"> </div>
<div style="clear:both"></div>
<br />
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:80px">Prénom: </div>
<input id="dic..prenom%" style="position:relative;float:left;width:150px;height:18px" type="text">
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:70px">Nom: </div>
<input id="dic..nom%" style="position:relative;float:left;width:150px;height:18px" type="text">
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:160px">Date de naissance: </div>
<input id="dic..deta_d_naissance%" style="position:relative;float:left;width:104px;height:18px" type="text">
<div style="clear:both"></div>
<br>
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:80px">Employeur: </div>
<input id="dic..employeur%" style="position:relative;float:left;width:450px;height:18px" type="text">
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:71px">Salaire: </div>
<input id="dic..salaire%" style="position:relative;float:left;width:120px;height:18px" type="text">
<div style="clear:both"></div>
<br>
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:80px">Caution: </div>
<textarea id='dic..caution%' rows='5' cols='200' style='position:relative; float:left;width:648px; height:90px;'></textarea>
<div style="clear:both"></div>
<br />
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:80px">Aide CAF: </div>
<input id="dic..aide_caf%" style="position:relative;float:left;width:100px;height:18px" type="text">
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:120px">Date d'entrée </div>
<input id="dic..date_entree%" style="position:relative;float:left;width:90px;height:18px" type="text">
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:120px">Date de sortie: </div>
<input id="dic..date_sortie%" style="position:relative;float:left;width:90px;height:18px" type="text">
<div style="clear:both"></div>
<br>
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:80px">Loyer HC: </div>
<input id="dic..loyer_assume%" style="position:relative;float:left;width:70px;height:18px" type="text">
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:70px">Loyer CC: </div>
<input id="dic..loyer_global%" style="position:relative;float:left;width:70px;height:18px" type="text">
<div style="position:relative;float:left;margin-left:7px;text-`enter code here`align:right;width:140px">Date Dern. ope.: </div>
<div id="dic..date_dern_ope$" class="lbCreux" style="float:left;width:70px"> </div>
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:120px">Solde du compte: </div>
<div id="dic..solde$" class="lbCreux" style="float:left;width:76px"> </div>
<div style="clear:both"></div>
<br />
<div style="position:relative;float:left;margin-left:7px;text-align:right;width:80px">Remarques: </div>
<textarea id='dic..txRem%' rows='5' cols='200' style='position:relative; float:left;width:647px; height:230px;'></textarea>
<div style="clear:both"></div>
<br />
</div>
【讨论】：
事实上，我已经将输入 {height:20px} 添加到全局 CSS 表中，但不记得了。而且效果立竿见影，所以不是 35 px 而不是 20，而是 20 而不是 14。
所以我们可以得出结论，我们可以在“input type=text”对象上设置“height”属性，所以我认为它没有效果是错误的。
【讨论】：