diff --git a/docs/components/button.md b/docs/components/button.md
index 7bc991390..ecf99e5d3 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -69,7 +69,7 @@ Block buttons can be created by setting the button's width to `100%`.
 ```html preview
 <sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
 <sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
-<sl-button type="default" size="large" style="width: 100%; margin-bottom: 1rem;">Large</sl-button>
+<sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
 ```
 
 ### Icons
@@ -81,10 +81,12 @@ Use the `prefix` and `suffix` slots to add icons.
   <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
 </sl-button>
+
 <sl-button type="default">
   <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
   Refresh
 </sl-button>
+
 <sl-button type="default">
   <sl-icon slot="prefix" name="link-45deg"></sl-icon>
   <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
diff --git a/src/components/avatar/avatar.scss b/src/components/avatar/avatar.scss
index 2a978afe9..fbbcbd628 100644
--- a/src/components/avatar/avatar.scss
+++ b/src/components/avatar/avatar.scss
@@ -5,15 +5,14 @@
   * @prop --size: The size of the avatar.
   */
 :host {
-  display: inline-flex;
+  display: inline-block;
 
   --background-color: var(--sl-color-gray-80);
   --size: 3rem;
 }
 
 .sl-avatar {
-  flex: 1 1 auto;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
@@ -26,6 +25,7 @@
   color: var(--sl-color-white);
   overflow: hidden;
   user-select: none;
+  vertical-align: middle;
 }
 
 .sl-avatar--circle {
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 5c5cf3354..b361108d6 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -7,7 +7,7 @@
 }
 
 .sl-button {
-  display: flex;
+  display: inline-flex;
   align-items: stretch;
   justify-content: center;
   width: 100%;
@@ -35,29 +35,29 @@
     cursor: not-allowed;
   }
 
-  .sl-button__prefix,
-  .sl-button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .sl-button__prefix ::slotted(:first-child) {
-    margin-left: calc(-1 * var(--sl-spacing-x-small));
-    margin-right: var(--sl-spacing-x-small);
-  }
-
-  .sl-button__suffix ::slotted(:last-child) {
-    margin-left: var(--sl-spacing-x-small);
-    margin-right: calc(-1 * var(--sl-spacing-x-small));
-  }
-
   // Clicks on icons shouldn't prevent the button from gaining focus
   ::slotted(sl-icon) {
     pointer-events: none;
   }
 }
 
+.sl-button__prefix,
+.sl-button__suffix {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.sl-button__prefix ::slotted(:first-child) {
+  margin-left: calc(-1 * var(--sl-spacing-x-small));
+  margin-right: var(--sl-spacing-x-small);
+}
+
+.sl-button__suffix ::slotted(:last-child) {
+  margin-left: var(--sl-spacing-x-small);
+  margin-right: calc(-1 * var(--sl-spacing-x-small));
+}
+
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Standard buttons
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////