How to reduce the gap cause <br>
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>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/
You can remove the <br> tag from html and instead put both alerts in a parent div and add margin to it.
.alertparent{
margin:5px;
}
.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="alertparent">
<div class="alert">You must read and agree to the Terms and Conditions agreement. </div>
</div>
<div class="alertparent">
<div class="alert">That email is already connected to an account!</div>
</div>You dont need the <br>tag. You can assign the DIVs a margin-bottom.
.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;
margin-bottom: 5px;
}<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>Remove the br tag, and use margin-bottom instead.
See the following example.
HTML
<div>content</div>
<div>content</div>
CSS
div {
margin-bottom: 15px;
}
Another way to do this is using the CSS grid. This way, you don't need to remove the margin of the last div (if needed) using extra CSS.
HTML
<div class='container'>
<div>Your contents</div>
<div>Your contents</div>
</div>
CSS
.container {
display: grid;
gap: 15px;
}
divs are already block-level elements which means by default it takes the full width of the browser. So whenever a div is added it automatically falls to a new line. If you want to explicitly add a space between them try using this
.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;
}
.alert:first-child{
margin-bottom: 5px;
}<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>