While assigning a line-height to text elements like div, span, or p and dragging them in the browser, an unsightly empty space appears within the selection box:
https://i.sstatic.net/Ws08H.png
I am seeking a way to elevate the actual text content within the selection box to enhance its appearance when dragged by users. Despite researching this issue extensively on Google, I have not been able to find a solution.
Is there any effective method to address this challenge?
HTML Code:
* {
margin: 0 auto;
padding: 0;
}
div, section {
position: relative;
}
.text {
width: 400px;
height: 600px;
font-family: Helvetica;
line-height: 2rem;
/* applying flexbox properties does not affect the text content itself */
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
/* neither align-self nor align-content impacts the text content */
align-self: center;
align-content: center;
border: 1px solid black;
}
p {
display: inline-flex;
vertical-align: center; /* vertical alignment has no effect on the text content */
align-self: center;
align-content: center;
} <div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>