diff --git a/docs/components/forms.md b/docs/components/forms.md
index c7da5c0fd1..a2d59d9208 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -516,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
 
 ## Static controls
 
-When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
+When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below).
 
 {% example html %}
 <form>
   <div class="form-group row">
     <label class="col-sm-2 col-form-label">Email</label>
     <div class="col-sm-10">
-      <p class="form-control-static">email@example.com</p>
+      <p class="form-control-static mb-0">email@example.com</p>
     </div>
   </div>
   <div class="form-group row">
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 5f5b26146c..d27b646d06 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -132,12 +132,11 @@ select.form-control {
 // horizontal form layout.
 
 .form-control-static {
-  min-height: $input-height;
-  // Size it appropriately next to real form controls
   padding-top: $input-padding-y;
   padding-bottom: $input-padding-y;
-  // Remove default margin from `p`
-  margin-bottom: 0;
+  line-height: $input-line-height;
+  border: solid transparent;
+  border-width: 1px 0;
 
   &.form-control-sm,
   &.form-control-lg {