CODEWITHSUNDEEP
htmlrazormodel-view-controller
Vishal
Vishal

Reputation: 2017

Reducing the whitespace between two divs in CSHTML

Problem Statement: I'm trying to reduce the white-space between two divs.Actually when i inspected the elements,i didn't notice any white-space between them.So is there anyway i can overflow on each other or Is there anything which i'm doing wrong??

HTML Code:

 <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)Image showing the output for the above html code: Image1

2)Desired Output which i'm trying to display:

Image2

What css i need to apply inorder to get desired output shown in the second image??

Upvotes: 2

Views: 454

Answers (2)

Rhumborl
Rhumborl

Reputation: 16609

Increasing the font-size increases the gap above and below the text - by default the full height of text is about 1.2 times the actual letter height, according to MDN.

You need to change the line-height of the divs to about 0.9em to reduce the gap.

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>

Upvotes: 1

atmd
atmd

Reputation: 7490

by the looks of it you need to adjust the line-height of the text to achieve that effect

Upvotes: 1

Related Questions