diff --git a/src/js/components/Import/FromFileUpload/FileUploadForm.tsx b/src/js/components/Import/FromFileUpload/FileUploadForm.tsx
index 6369b89e..f2c8b7b3 100644
--- a/src/js/components/Import/FromFileUpload/FileUploadForm.tsx
+++ b/src/js/components/Import/FromFileUpload/FileUploadForm.tsx
@@ -95,7 +95,7 @@ export const FileUploadForm: React.FC = () => {
 
 								<ImportCard>
 									<h2 style={{ margin: '0 0 1em 0' }}>{__('Choose Files', 'code-snippets')}</h2>
-									<p className="description" style={{ marginBottom: '1em' }}>
+									<p className="description" style={{ marginBlockEnd: '1em' }}>
 										{__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')}
 									</p>
 
@@ -133,12 +133,12 @@ export const FileUploadForm: React.FC = () => {
 
 				{currentStep === 'select' && importWorkflow.availableSnippets.length > 0 && !importWorkflow.uploadResult?.success && (
 					<ImportCard ref={selectSectionRef}>
-						<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '20px' }}>
+						<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBlockEnd: '20px' }}>
 							<Button onClick={handleBackToUpload} className="button-link">
 								{__('← Upload Different Files', 'code-snippets')}
 							</Button>
 						</div>
-						<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+						<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBlockEnd: '10px' }}>
 							<div>
 								<h3 style={{ margin: '0' }}>{__('Available Snippets', 'code-snippets')} ({importWorkflow.availableSnippets.length})</h3>
 								<p style={{ margin: '0.5em 0 1em 0', color: '#666' }}>
@@ -146,7 +146,7 @@ export const FileUploadForm: React.FC = () => {
 								</p>
 							</div>
 							<div>
-								<Button onClick={snippetSelection.handleSelectAll} style={{ marginRight: '10px' }}>
+								<Button onClick={snippetSelection.handleSelectAll} style={{ marginInlineEnd: '10px' }}>
 									{snippetSelection.isAllSelected 
 										? __('Deselect All', 'code-snippets')
 										: __('Select All', 'code-snippets')
@@ -172,8 +172,8 @@ export const FileUploadForm: React.FC = () => {
 							onSelectAll={snippetSelection.handleSelectAll}
 						/>
 						
-						<div style={{ textAlign: 'end', marginTop: '1em' }}>
-							<Button onClick={snippetSelection.handleSelectAll} style={{ marginRight: '10px' }}>
+						<div style={{ textAlign: 'end', marginBlockStart: '1em' }}>
+							<Button onClick={snippetSelection.handleSelectAll} style={{ marginInlineEnd: '10px' }}>
 								{snippetSelection.isAllSelected 
 									? __('Deselect All', 'code-snippets')
 									: __('Select All', 'code-snippets')
diff --git a/src/js/components/Import/FromFileUpload/components/DragDropUploadArea.tsx b/src/js/components/Import/FromFileUpload/components/DragDropUploadArea.tsx
index 1c8b6029..15ead294 100644
--- a/src/js/components/Import/FromFileUpload/components/DragDropUploadArea.tsx
+++ b/src/js/components/Import/FromFileUpload/components/DragDropUploadArea.tsx
@@ -38,12 +38,12 @@ export const DragDropUploadArea: React.FC<DragDropUploadAreaProps> = ({
 					textAlign: 'center',
 					cursor: disabled ? 'not-allowed' : 'pointer',
 					backgroundColor: dragOver ? '#f0f6fc' : disabled ? '#f6f7f7' : '#fafafa',
-					marginBottom: '20px',
+					marginBlockEnd: '20px',
 					transition: 'all 0.3s ease',
 					opacity: disabled ? 0.6 : 1
 				}}
 			>
-				<div style={{ fontSize: '48px', marginBottom: '10px', color: '#666' }}>📁</div>
+				<div style={{ fontSize: '48px', marginBlockEnd: '10px', color: '#666' }}>📁</div>
 				<p style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '500' }}>
 					{__('Drag and drop files here, or click to browse', 'code-snippets')}
 				</p>
diff --git a/src/js/components/Import/FromFileUpload/components/DuplicateActionSelector.tsx b/src/js/components/Import/FromFileUpload/components/DuplicateActionSelector.tsx
index b4757da0..cd8a28b8 100644
--- a/src/js/components/Import/FromFileUpload/components/DuplicateActionSelector.tsx
+++ b/src/js/components/Import/FromFileUpload/components/DuplicateActionSelector.tsx
@@ -16,7 +16,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = (
 	return (
 		<ImportCard>
 			<h2 style={{ margin: '0 0 1em 0' }}>{__('Duplicate Snippets', 'code-snippets')}</h2>
-			<p className="description" style={{ marginBottom: '1em' }}>
+			<p className="description" style={{ marginBlockEnd: '1em' }}>
 				{__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')}
 			</p>
 			
@@ -29,7 +29,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = (
 							value="ignore"
 							checked={value === 'ignore'}
 							onChange={(e) => onChange(e.target.value as DuplicateAction)}
-							style={{ marginTop: '2px' }}
+							style={{ marginBlockStart: '2px' }}
 						/>
 						<span>
 							{__('Ignore any duplicate snippets: import all snippets from the file regardless and leave all existing snippets unchanged.', 'code-snippets')}
@@ -43,7 +43,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = (
 							value="replace"
 							checked={value === 'replace'}
 							onChange={(e) => onChange(e.target.value as DuplicateAction)}
-							style={{ marginTop: '2px' }}
+							style={{ marginBlockStart: '2px' }}
 						/>
 						<span>
 							{__('Replace any existing snippets with a newly imported snippet of the same name.', 'code-snippets')}
@@ -57,7 +57,7 @@ export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = (
 							value="skip"
 							checked={value === 'skip'}
 							onChange={(e) => onChange(e.target.value as DuplicateAction)}
-							style={{ marginTop: '2px' }}
+							style={{ marginBlockStart: '2px' }}
 						/>
 						<span>
 							{__('Do not import any duplicate snippets; leave all existing snippets unchanged.', 'code-snippets')}
diff --git a/src/js/components/Import/FromFileUpload/components/ImportResultDisplay.tsx b/src/js/components/Import/FromFileUpload/components/ImportResultDisplay.tsx
index 92c762a9..38bd186e 100644
--- a/src/js/components/Import/FromFileUpload/components/ImportResultDisplay.tsx
+++ b/src/js/components/Import/FromFileUpload/components/ImportResultDisplay.tsx
@@ -26,7 +26,7 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ result
 					alignItems: 'center', 
 					justifyContent: 'center',
 					flexShrink: 0,
-					marginTop: '2px'
+					marginBlockStart: '2px'
 				}}>
 					<span style={{ color: 'white', fontSize: '14px', fontWeight: 'bold' }}>
 						{result.success ? '✓' : '✕'}
@@ -54,11 +54,11 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ result
 					)}
 
 					{result.warnings && result.warnings.length > 0 && (
-						<div style={{ marginTop: '12px' }}>
+						<div style={{ marginBlockStart: '12px' }}>
 							<h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#d63638' }}>
 								{__('Warnings:', 'code-snippets')}
 							</h4>
-							<ul style={{ margin: '0', paddingLeft: '20px' }}>
+							<ul style={{ margin: '0', paddingInlineStart: '20px' }}>
 								{result.warnings.map((warning, index) => (
 									<li key={index} style={{ color: '#666', fontSize: '14px' }}>
 										{warning}
diff --git a/src/js/components/Import/FromFileUpload/components/SelectedFilesList.tsx b/src/js/components/Import/FromFileUpload/components/SelectedFilesList.tsx
index 3bf11aa3..0cc70c49 100644
--- a/src/js/components/Import/FromFileUpload/components/SelectedFilesList.tsx
+++ b/src/js/components/Import/FromFileUpload/components/SelectedFilesList.tsx
@@ -12,7 +12,7 @@ export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({
 	onRemoveFile
 }) => {
 	return (
-		<div className="selected-files" style={{ marginBottom: '20px' }}>
+		<div className="selected-files" style={{ marginBlockEnd: '20px' }}>
 			<h3 style={{ margin: '0 0 12px 0', fontSize: '14px', fontWeight: '600' }}>
 				{__('Selected Files:', 'code-snippets')} ({files.length})
 			</h3>
diff --git a/src/js/components/Import/FromFileUpload/components/SnippetSelectionTable.tsx b/src/js/components/Import/FromFileUpload/components/SnippetSelectionTable.tsx
index 8a59d197..f31d468f 100644
--- a/src/js/components/Import/FromFileUpload/components/SnippetSelectionTable.tsx
+++ b/src/js/components/Import/FromFileUpload/components/SnippetSelectionTable.tsx
@@ -61,7 +61,7 @@ export const SnippetSelectionTable: React.FC<SnippetSelectionTableProps> = ({
 						<td>
 							<strong>{snippet.table_data.title}</strong>
 							{snippet.source_file && (
-								<div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
+								<div style={{ fontSize: '12px', color: '#666', marginBlockStart: '2px' }}>
 									from {snippet.source_file}
 								</div>
 							)}
diff --git a/src/js/components/Import/FromOtherPlugins/ImportForm.tsx b/src/js/components/Import/FromOtherPlugins/ImportForm.tsx
index 5c61cc50..383e2aed 100644
--- a/src/js/components/Import/FromOtherPlugins/ImportForm.tsx
+++ b/src/js/components/Import/FromOtherPlugins/ImportForm.tsx
@@ -106,7 +106,7 @@ export const ImportForm: React.FC = () => {
 				 snippetImport.importSuccess.length === 0 && (
 					<ImportCard>
 						<div style={{ textAlign: 'center', padding: '40px 20px', color: '#666' }}>
-							<div style={{ fontSize: '48px', marginBottom: '16px' }}>📭</div>
+							<div style={{ fontSize: '48px', marginBlockEnd: '16px' }}>📭</div>
 							<h3 style={{ margin: '0 0 8px 0', fontSize: '18px', color: '#333' }}>
 								{__('No snippets found', 'code-snippets')}
 							</h3>
diff --git a/src/js/components/Import/FromOtherPlugins/components/ImportOptions.tsx b/src/js/components/Import/FromOtherPlugins/components/ImportOptions.tsx
index ac084959..66fd1b02 100644
--- a/src/js/components/Import/FromOtherPlugins/components/ImportOptions.tsx
+++ b/src/js/components/Import/FromOtherPlugins/components/ImportOptions.tsx
@@ -23,7 +23,7 @@ export const ImportOptions: React.FC<ImportOptionsProps> = ({
 					type="checkbox"
 					checked={autoAddTags}
 					onChange={(e) => onAutoAddTagsChange(e.target.checked)}
-					style={{ marginTop: '2px' }}
+					style={{ marginBlockStart: '2px' }}
 				/>
 				<div style={{ flex: 1 }}>
 					<div>
@@ -34,7 +34,7 @@ export const ImportOptions: React.FC<ImportOptionsProps> = ({
 						</span>
 					</div>
 					{autoAddTags && (
-						<div style={{ marginTop: '12px' }}>
+						<div style={{ marginBlockStart: '12px' }}>
 							<input
 								type="text"
 								value={tagValue}
diff --git a/src/js/components/Import/FromOtherPlugins/components/ImporterSelector.tsx b/src/js/components/Import/FromOtherPlugins/components/ImporterSelector.tsx
index bed4d287..010358b9 100644
--- a/src/js/components/Import/FromOtherPlugins/components/ImporterSelector.tsx
+++ b/src/js/components/Import/FromOtherPlugins/components/ImporterSelector.tsx
@@ -26,7 +26,7 @@ export const ImporterSelector: React.FC<ImporterSelectorProps> = ({
 				value={selectedImporter}
 				onChange={(event) => onImporterChange(event.target.value)}
 				className="regular-text"
-				style={{ display: 'block', marginTop: '5px', width: '100%', maxWidth: '300px' }}
+				style={{ display: 'block', marginBlockStart: '5px', width: '100%', maxWidth: '300px' }}
 				disabled={isLoading}
 			>
 				<option value="">{__('-- Select an importer --', 'code-snippets')}</option>
diff --git a/src/js/components/Import/FromOtherPlugins/components/SimpleSnippetTable.tsx b/src/js/components/Import/FromOtherPlugins/components/SimpleSnippetTable.tsx
index f6c7f8ec..30e3a823 100644
--- a/src/js/components/Import/FromOtherPlugins/components/SimpleSnippetTable.tsx
+++ b/src/js/components/Import/FromOtherPlugins/components/SimpleSnippetTable.tsx
@@ -25,13 +25,13 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = ({
 
 	return (
 		<ImportCard className="snippets-table-container">
-			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBlockEnd: '10px' }}>
 				<div>
 					<h2 style={{ margin: '0' }}>{__('Available Snippets', 'code-snippets')} ({snippets.length})</h2>
 					<p style={{ margin: '0.5em 0 1em 0' }}>{__('We found the following snippets.', 'code-snippets')}</p>
 				</div>
 				<div>
-					<Button onClick={onSelectAll} style={{ marginRight: '10px' }}>
+					<Button onClick={onSelectAll} style={{ marginInlineEnd: '10px' }}>
 						{isAllSelected
 							? __('Deselect All', 'code-snippets')
 							: __('Select All', 'code-snippets')
@@ -80,8 +80,8 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = ({
 				</tbody>
 			</table>
 			
-			<div style={{ textAlign: 'end', marginTop: '1em' }}>
-				<Button onClick={onSelectAll} style={{ marginRight: '10px' }}>
+			<div style={{ textAlign: 'end', marginBlockStart: '1em' }}>
+				<Button onClick={onSelectAll} style={{ marginInlineEnd: '10px' }}>
 					{isAllSelected
 						? __('Deselect All', 'code-snippets')
 						: __('Select All', 'code-snippets')
diff --git a/src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx b/src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx
index 09e0b39a..e5d0e919 100644
--- a/src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx
+++ b/src/js/components/Import/FromOtherPlugins/components/StatusDisplay.tsx
@@ -18,7 +18,7 @@ export const StatusDisplay: React.FC<StatusDisplayProps> = ({
 	const isError = type === 'error'
 	
 	return (
-		<ImportCard variant="controls" style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', marginBottom: '20px' }}>
+		<ImportCard variant="controls" style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', marginBlockEnd: '20px' }}>
 			<div style={{ 
 				backgroundColor: isError ? '#d63638' : '#00a32a', 
 				borderRadius: '50%', 
@@ -28,7 +28,7 @@ export const StatusDisplay: React.FC<StatusDisplayProps> = ({
 				alignItems: 'center', 
 				justifyContent: 'center',
 				flexShrink: 0,
-				marginTop: '2px'
+				marginBlockStart: '2px'
 			}}>
 				<span style={{ color: 'white', fontSize: '14px', fontWeight: 'bold' }}>
 					{isError ? '✕' : '✓'}
diff --git a/src/js/components/Import/ImportApp.tsx b/src/js/components/Import/ImportApp.tsx
index 2d036bdd..a000f562 100644
--- a/src/js/components/Import/ImportApp.tsx
+++ b/src/js/components/Import/ImportApp.tsx
@@ -27,7 +27,7 @@ export const ImportApp: React.FC = () => {
 
 	return (
 		<div className="narrow" style={{ maxWidth: '800px' }}>
-			<h2 className="nav-tab-wrapper" style={{ marginBottom: '20px' }}>
+			<h2 className="nav-tab-wrapper" style={{ marginBlockEnd: '20px' }}>
 				<a
 					className={`nav-tab${activeTab === 'upload' ? ' nav-tab-active' : ''}`}
 					href="#"
diff --git a/src/js/components/Import/shared/components/ImportCard.tsx b/src/js/components/Import/shared/components/ImportCard.tsx
index 64d8182f..f2420de1 100644
--- a/src/js/components/Import/shared/components/ImportCard.tsx
+++ b/src/js/components/Import/shared/components/ImportCard.tsx
@@ -20,7 +20,7 @@ export const ImportCard = React.forwardRef<HTMLDivElement, ImportCardProps>(({
 		padding: '25px',
 		borderRadius: '5px',
 		border: '1px solid #e0e0e0',
-		marginBottom: '10px',
+		marginBlockEnd: '10px',
 		width: '100%',
 		...style
 	}
diff --git a/src/js/components/Import/shared/components/ImportSection.tsx b/src/js/components/Import/shared/components/ImportSection.tsx
index 262798c9..255fd2a3 100644
--- a/src/js/components/Import/shared/components/ImportSection.tsx
+++ b/src/js/components/Import/shared/components/ImportSection.tsx
@@ -17,7 +17,7 @@ export const ImportSection: React.FC<ImportSectionProps> = ({
 }) => {
 	const sectionStyle: React.CSSProperties = {
 		display: active ? 'block' : 'none',
-		paddingTop: 0,
+		paddingBlockStart: 0,
 		...style
 	}
 
diff --git a/src/php/class-plugin.php b/src/php/class-plugin.php
index faa3ddc3..27c5962c 100644
--- a/src/php/class-plugin.php
+++ b/src/php/class-plugin.php
@@ -160,7 +160,7 @@ public function load_plugin() {
 		// Importers.
 		new Plugins_Import_Manager();
 		new Files_Import_Manager();
-		
+
 		// Initialize promotions.
 		new Promotions\Elementor_Pro();
 	}