Spacing between lines Textarea

Question

I have a doubt in which I am already battling for some time, I wanted to add more spacing between lines of the textarea .

Here is a current image of my text area that I want to add line spacing.

.notes {
	width: 77%;
	background-attachment: local;
	background-image: linear-gradient(to right, white 10px, transparent 10px), linear-gradient(to left, white 10px, transparent 10px), repeating-linear-gradient(white, white 31px, black 31px, black 33px, black 32px);
	line-height: 31px;
	padding: 8px 10px;
	border: none;
	margin-left: -9px;
      margin-right: 0px;
	outline: none;
}

<textarea rows="4" class="notes" id="mensagem" name="mensagem" ></textarea>
<label style="position: absolute; margin-top: -10px; margin-left: -20px;" class="valign-top">Mensagem</label>

Answer 1

So it works the line-height has to match the higher value of the gradient that makes the lines. See the two images below to better understand. Adjust the values and you can put the line the size you want.

Check this code: Note the values in bold

repeating-linear-gradient(white, white 41px, black 41px, black 43px); line-height: 43px;

Follow the code with the between lines increased

.notes {
    width: 77%;
    background-attachment: local;
    
    background-image: linear-gradient(to right, white 10px, transparent 10px), linear-gradient(to left, white 10px, transparent 10px),
                        repeating-linear-gradient(white, white 41px, black 41px, black 43px);
    line-height: 43px;

    padding: 8px 10px;
    border: none;
    margin-left: -9px;
    margin-right: 0px;
    outline: none;
}

<textarea rows="4" class="notes" id="mensagem" name="mensagem"></textarea>

<label style="position: absolute; margin-top: -10px; margin-left: -20px;" class="valign-top">Mensagem</label>