How to reduce the gap cause <br>

January 22, 2022

How can i reduce the "gap" or the "space" cause by the <br> on this CSS because it is too much …
also it is really noticeable on actual web browser on PC so here’s a live demo
thank you ..

.alert {
  margin: auto;
  width: 50%;
  padding: 3px 10px 3px 40px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: Tomato;

  font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet, sans-serif;
  font-size: 16px;
  color: black;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  text-align: left;
  line-height: 1.5;
  display: block;
}

<div class="alert">You must read and agree to the Terms and Conditions agreement. </div><br>
<div class="alert">That email is already connected to an account!</div>

>Solution :

You shouldn’t really be using line breaks for this purpose. Just add a bottom margin to the .alert class and remove the line break.

<div class="alert">You must read and agree to the Terms and Conditions agreement. </div>
<div class="alert">That email is already connected to an account!</div>

.alert {
  margin: 0 auto 5px auto;
  width: 50%;
  padding: 3px 10px 3px 40px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: Tomato;

  font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet, sans-serif;
  font-size: 16px;
  color: black;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5px;
  text-align: left;
  line-height: 1.5;
  display: block;
}

https://jsfiddle.net/74qaxr2z/