diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef45cad4acd..ef4617dcc20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `28.0.0`.
+**Bug fixes**
+
+- Fixed bug in `EuiCodeBlock` content overlapping with control buttons when `whiteSpace` was set to `"pre"` ([#3853](https://github.com/elastic/eui/pull/3853))
 
 ## [`28.0.0`](https://github.com/elastic/eui/tree/v28.0.0)
 
diff --git a/src-docs/src/views/code/code_block_pre.js b/src-docs/src/views/code/code_block_pre.js
index be8c8932d2f..b27f43d6eea 100644
--- a/src-docs/src/views/code/code_block_pre.js
+++ b/src-docs/src/views/code/code_block_pre.js
@@ -13,9 +13,7 @@ export default () => (
       whiteSpace="pre"
       isCopyable>
       {`export default () => (
-  <div>
-    In this example, the whiteSpace property is set to pre. All the whitespaces will be kept as is and the text only wraps when line breaks are in the content.
-  </div>
+  <div>In this example, the whiteSpace property is set to pre. All the whitespaces will be kept as is and the text only wraps when line breaks are in the content.</div>
 );`}
     </EuiCodeBlock>
   </div>
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index a70bebba4e7..918c4665efd 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -70,6 +70,14 @@
   // Storing for re-use the sizing of controls plus extra padding
   $controlsPadding: $euiSizeL + $euiSizeXS;
 
+  &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap {
+    padding-right: $controlsPadding;
+  }
+
+  &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre {
+    margin-right: $controlsPadding;
+  }
+
   // Small padding
   &.euiCodeBlock--paddingSmall {
     .euiCodeBlock__pre {
@@ -81,9 +89,13 @@
       right: $euiSizeS;
     }
 
-    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap {
       padding-right: $euiSizeS + $controlsPadding;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre {
+      margin-right: $euiSizeS + $controlsPadding;
+    }
   }
 
   // Medium padding
@@ -97,9 +109,13 @@
       right: $euiSize;
     }
 
-    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap {
       padding-right: $euiSize + $controlsPadding;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre {
+      margin-right: $euiSize + $controlsPadding;
+    }
   }
 
   // Large padding
@@ -113,9 +129,13 @@
       right: $euiSizeL;
     }
 
-    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap {
       padding-right: $euiSizeL + $controlsPadding;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre {
+      margin-right: $euiSizeL + $controlsPadding;
+    }
   }
 
   /*