【问题标题】:Reducing the whitespace between two divs in CSHTML减少 CSHTML 中两个 div 之间的空白
【发布时间】:2015-03-04 03:54:21
【问题描述】:

问题陈述: 我正在尝试减少两个 div 之间的空白。实际上,当我检查元素时,我没有注意到它们之间有任何空白。所以无论如何我可以互相溢出或者有什么我'我做错了吗??

HTML 代码:

 <div style="text-align:center;position:absolute;left:20px;top:5px;">
        <div style="font-size:150px;color:black;">
            @Html.Label("lblTarget", "1234"))
         </div>
         <div style="font-size:70px;color:black;">
             @Html.Label("lblLang", "Some Test Data")
         </div>
  </div>

1) 显示上述 html 代码输出的图像:

2)我想要显示的期望输出:

我需要应用什么 css 才能获得第二张图片中显示的所需输出??

【问题讨论】:

    标签: html razor model-view-controller


    【解决方案1】:

    从外观上看,您需要调整文本的行高以实现该效果

    【讨论】:

    • 感谢 div 的行高解决了我的问题。我在主 div 中使用了line-height: 100px;
    【解决方案2】:

    增加font-size 会增加文本上方和下方的间隙 - 默认情况下,文本的全高约为实际字母高度的 1.2 倍,according to MDN

    您需要将divs 的line-height 更改为大约0.9em 以减少差距。

    body {
        font-family:sans-serif;
        font-weight:bold;
    }
    
    div{
        line-height:0.9em;
    }
     <div style="text-align:center;position:absolute;left:20px;top:5px;">
            <div style="font-size:150px;color:black;">
                <label for="lblTarget">1234</label>
             </div>
             <div style="font-size:70px;color:black;">
                 <label for="lblLang">Some Test Data</label>
             </div>
      </div>

    【讨论】:

      猜你喜欢
      • 2022-06-22
      • 1970-01-01
      • 2018-02-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多