Padding style applied to element doesn't work-CodePudding

I try to add bottom-space to my email_info element, but it doesn't work

div#email_info {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
  width: 650px;
  padding-bottom: 24px;
}

<div>
  <div  id="email_info" style="display: inline;" aria- hidden="false" role="alert" aria-live="polite">Un code de validation a été envoyé à votre adresse courriel. Veuillez l'inscrire ci-dessous.
  </div>
</div>
<label id="email_label" for="email">Adresse courriel</label>

CodePudding user response：

For inline elements, although horizontal padding and margins are respected, their vertical counterparts are ignored, so padding-bottom doesn't work here because you're forcing your <div> to be inline with style="display: inline;". Just remove that to solve your issue.

div#email_info {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
  width: 650px;
  padding-bottom: 24px;
}

<div>
  <div  id="email_info" aria-hidden="false" role="alert" aria-live="polite">Un code de validation a été envoyé à votre adresse courriel. Veuillez l'inscrire ci-dessous.
  </div>
</div>
<label id="email_label" for="email">Adresse courriel</label>

Alternatively, you could apply the padding to the other <div> instead, which isn't declared as inline, and that should work too.

div.container {
  padding-bottom: 24px;
}
div#email_info {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
  width: 650px;
}

<div >
  <div  id="email_info" style="display: inline;" aria-hidden="false" role="alert" aria-live="polite">Un code de validation a été envoyé à votre adresse courriel. Veuillez l'inscrire ci-dessous.
  </div>
</div>
<label id="email_label" for="email">Adresse courriel</label>

CodePudding user response：

Vertical padding doesn't apply to an inline element. Change it to inline-block instead.

div#email_info {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
  width: 650px;
  padding-bottom: 24px;
}

<div>
  <div  id="email_info" style="display: inline-block;;" aria- hidden="false" role="alert" aria-live="polite">Un code de validation a été envoyé à votre adresse courriel. Veuillez l'inscrire ci-dessous.
  </div>
</div>
<label id="email_label" for="email">Adresse courriel</label>