Html 锚定标签高度值赢得'；不变

我尝试了这里列举的所有解决方案：

即设置

这是我的HTML：

<div class="search-bar-locations">
   <a href='#' id='center'>
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
   </a> 
  </div>

下面是它将
呈现为230px 70px，而不是200x40

将锚定标签包裹在你的外面
如下：

<a href='#' id='center'>
  <div class="search-bar-locations">
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
  </div>
</a>



编辑：锚定标记采用其中任何内容的大小。因此，如果要格式化链接的高度，请更改其中div的高度
 您需要了解长方体模型如何适用于块元素。请记住，添加填充时，将填充量添加到长方体的宽度和高度。这就是为什么你们的期望值和实际值相差30像素


有一种方法可以解决这个问题，即使用“框大小”属性


在您的示例中，您将使用：

  -moz-box-sizing: border-box;
       box-sizing: border-box;

嘿，你可以试试这个解决方案，这样你可以给锚定高度。：）


//代码
//CSS
.搜索栏位置a{
显示：块；
高度：40px；
填充：15px；
线高：40px；
宽度：200px；
背景：#eab63e；
颜色：白色；
文本对齐：居中；
文字装饰：无；
}
不太确定您想做什么-看起来标签的高度与您给定的高度相同。@TimMcClure我希望背景为#eab63e的块的宽度为200px，高度为40px，但它以70px的高度呈现230px OK，所以你真的是在尝试调整div的高度。@VladBardalez的答案应该可以解决你的问题。这些答案都不正确，填充量是导致这一问题的原因。宽度和高度需要考虑填充，或者使用“框大小”属性。
  -moz-box-sizing: border-box;
       box-sizing: border-box;

//CODE

<div class="search-bar-locations">
   <a href='#' id='center'>
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
   </a> 
  </div>

//CSS

.search-bar-locations a{
   display:block;
    height: 40px;
    padding: 15px;
    line-height:40px;
    width: 200px;
    background: #eab63e;
    color: white;
    text-align:center;
    text-decoration:none;
 }