fix .col-form-label paddings and add line-height (#23121)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index fb3dc55992ee615916c068cc118e4ffc3dc8c4d7..69429fdef85e7af4eb22d263f25dcf95ba7bda75 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -88,21 +88,24 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
+  padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
   margin-bottom: 0; // Override the `<label>` default
+  line-height: $input-btn-line-height;
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
+  padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
   font-size: $font-size-lg;
+  line-height: $input-btn-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
+  padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
   font-size: $font-size-sm;
+  line-height: $input-btn-line-height-sm;
 }