resolve the margin of topic in the article info and article content pages

src/components/fetchAnArticle/AnArticle.tsx

@@ -33,7 +33,7 @@ const AnArticle = () => {
           <AskeletonArticle />
         ) : (
           <>
-            <ArticlePart.Article.Breadcumbs>
+            <ArticlePart.Article.Breadcumbs className="py-4">
               {article?.topic}
             </ArticlePart.Article.Breadcumbs>
             <div className="flex flex-col gap-4 pb-4">
@@ -52,25 +52,18 @@ const AnArticle = () => {
             />
             {article?.tags && (
               <div className="keywords my-10 flex flex-col gap-2">
-                <Typography
-                  className="text-2xl"
-                  fontWeightVariant="semibold"
-                >
-                  {t('articlePage.keywords')}
+                <Typography className="text-2xl" fontWeightVariant="semibold">
+                  {t("articlePage.keywords")}
                 </Typography>
 
-
                 <ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
                   {article?.tags}
                 </ArticlePart.Article.Keywords>
               </div>
             )}
             <div className="abstract my-10 flex flex-col gap-2">
-              <Typography
-                className="text-2xl"
-                fontWeightVariant="semibold"
-              >
-                {t('articlePage.abstract')}
+              <Typography className="text-2xl" fontWeightVariant="semibold">
+                {t("articlePage.abstract")}
               </Typography>
               <ArticlePart.Article.Description>
                 {article?.summary !== undefined ? (

src/components/fetchAnArticle/AnArticleBody.tsx

@@ -27,7 +27,7 @@ const AnArticleBody = () => {
       <Container variant="straight">
         {shouldShowLoading ? (
           <>
-            <Skeleton count={1} />
+            <Skeleton count={1} className="my-4" />
             <div className="gap-4 py-12 px-20">
               <Skeleton
                 count={1}
@@ -39,7 +39,7 @@ const AnArticleBody = () => {
           </>
         ) : (
           <>
-            <ArticlePart.Article.Breadcumbs>
+            <ArticlePart.Article.Breadcumbs className="py-4">
               {article?.topic}
             </ArticlePart.Article.Breadcumbs>
             <div className="gap-4 py-12 px-20">

src/components/fetchAnArticle/AskeletonArticle.tsx

@@ -3,7 +3,7 @@ import "react-loading-skeleton/dist/skeleton.css";
 const AskeletonArticle = () => {
   return (
     <>
-      <Skeleton count={1} />
+      <Skeleton count={1} className="my-4" />
       <div className="flex flex-col gap-4 pb-4">
         <Skeleton count={1} containerClassName="title w-3/4 text-2xl" />
         <Skeleton count={1} containerClassName="authors w-1/4" />