如何将我的两个元素靠得更近？

huangapple
go评论104阅读模式
英文:

How do I get my two elements closer together

问题

I noticed that you want to make changes to the footer-info and socials section of your code. Specifically, you mentioned that the size of the anchor <a> elements for the socials is causing an issue. If you change the size from 18 x 133 to 18 x 18 by modifying the .social a style class, it affects the positioning of the icons. If you need assistance with this issue, please let me know.

英文:

I'm trying to get the footer-info and socials closer together. I noticed that part of the issue is that the on the anchor <a> for the socials, its size is 18 x 133 for some reason, and when I change it to 18 x 18 by changing the .social a style class it pushes the icons to this white bit of the website. Any help would be appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font-family: system-ui, -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, sans-serif;
  6. }
  8. .top-container{
  9.     padding: 200px;
  10. }
  12. .showcase {
  13.     background-color: rgb(39,43,51);
  14.     width: max-content;
  16. }
  18. .showcase-inner {
  19.     margin: 0;
  20.     padding-top: 30px;
  21.     padding-bottom: 30px;
  22. }
  24. .footer { 
  25.     background-color: rgb(32,35,41);
  26.     font-size: 100px;
  27.     padding-top: 30px;
  28. }
  30. h1{
  31.     font-size: 95px;
  32.     text-align: center;
  33.     font-weight: 1000;
  34.     color: rgb(32,35,41);
  35. }
  38. main {
  39.     display: grid;
  40.     grid-template-columns: 1fr 1fr 1fr;
  41.     gap: 0;
  42.     overflow-x: hidden;
  43. }
  45. .image-container{
  46.     display: flex;
  47. }
  49. .image-container img{
  50.     width: 229.2px;
  51.     height: 220px;
  52.     border-radius: 25px;
  53. }
  55. article{
  56.     padding: 10px;
  57. }
  59. .character-card{
  60.     display: flex;
  61.     margin: 13.5px;
  62.     background-color: rgb(60,62,68);
  63.     border-radius: 25px;
  64.     box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
  65. }
  67. .character-info{
  68.     display: flex;
  69.     flex-direction: column;
  70.     padding: 13.5px;
  71.     position: relative;
  72. }
  74. .section{
  75.     display: flex;
  76.     flex-direction: column;
  77.     width: 330px;
  78.     height: 64.33px;
  79.     color: rgb(245,245,245);
  80. }
  82. .greytext{
  83.     color: rgb(158,158,158);
  84. }
  86. .navbar {
  87.     background-color: #ffffff;
  88.     list-style-type: none;
  89.     margin: 0;
  90.     padding: 0;
  91.     overflow: hidden;
  92.     display: flex;
  93.     justify-content: space-between;
  94. }
  96. .navbar li {
  97.     float: left;
  98. }
  100. .navbar li a {
  101.     display: block;
  102.     color: #333;
  103.     text-align: center;
  104.     padding: 14px 16px;
  105.     text-decoration: none;
  106.     transition: color 0.2s;
  107. }
  109. .content-links{
  110.     margin-left: auto;
  111.     padding: 10px;
  112.     margin-right: 10px;
  113.     font-size: 20px;
  114.     font-weight: 750;
  115. }
  117. .content-links a:hover{
  118.     color: rgb(255,152,0);
  119. }
  121. .homebutton{
  122.     margin-right: auto;
  123. }
  125. .homebutton img{
  126.     width: 50px;
  127.     height: 50px;
  128. }
  130. .status {
  131.     display: flex;
  132.     align-items: center;
  133. }
  135. .status-dot {
  136.     width: 8px;
  137.     height: 8px;
  138.     border-radius: 50%;
  139.     display: inline-block;
  140.     margin-right: 5px;
  141. }
  142.   
  143. .status-dot.grey {
  144.     background-color: rgb(158,158,158);
  145. }
  146.   
  147. .status-dot.red {
  148.     background-color: rgb(214,61,46);
  149. }
  150.   
  151. .status-dot.green {
  152.     background-color: rgb(85,204,68);
  153. }
  154.   
  155. .about-content{
  156.     display: flex;
  157.     flex-direction: column;
  158.     padding: 5px;
  159.     margin-left: 500px;
  160.     margin-right: 500px;
  161.     font-size: 110%;
  162.     color: rgb(66,66,66);
  163. }
  165. .abouth2 {
  166.     font-size: 35px;
  167.     font-weight: 800;
  168.     margin-bottom: 30px;
  169.     color: rgb(32,35,41);
  170. }
  172. .abouth3 {
  173.     font-size: 25px;
  174.     font-weight: 800;
  175.     margin-top: 10px;
  176.     margin-bottom: 10px;
  177.     color: rgb(32,35,41);
  178. }
  180. .ablink {
  181.     text-decoration-color: rgb(255,152,0);
  182.     text-decoration-thickness: 2px;
  183.     text-underline-offset: 4px;
  184.     color: rgb(66,66,66);
  185. }
  187. .ablink:hover {
  188.     text-decoration: none;
  189.     color: rgb(255,152,0);
  190.     transition: color 0.2s;
  191. }
  193. .footer-info {
  194.     display: flex;
  195.     justify-content: center;
  196.     list-style: none;
  197.     padding-top: 40px;
  198.     margin: 0;
  199.     font-size: 15px;
  200.     font-weight: 750;
  201.     color: rgb(158, 158, 158);
  202. }
  204. .footer-info li {
  205.     margin-right: 20px;
  206. }
  208. .socials {
  209.     display: flex;
  210.     justify-content: center;
  211.     align-items: center;
  212. }
  214. .socials a {
  215.     margin: 10px;
  216. }
  218. .socials a:hover svg path {
  219.     fill: rgb(255, 152, 0);
  220. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3.     &lt;head&gt;
  4.         &lt;title&gt;Rick and Morty API&lt;/title&gt;
  5.         &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.         &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  7.     &lt;/head&gt;
  9.     &lt;body&gt;
  10.         &lt;ul class=&quot;navbar&quot;&gt;
  11.             &lt;li class=&quot;homebutton&quot;&gt;&lt;a href=&quot;landing.html&quot;&gt;&lt;img src=&quot;RMAPI-homepagebutton.png&quot; alt=&quot;Home&quot;&gt;&lt;/a&gt;&lt;/li&gt;
  12.             &lt;li class=&quot;content-links&quot;&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  13.         &lt;/ul&gt;
  14.         &lt;div class=&quot;top-container&quot;&gt;
  15.             &lt;h1&gt;The Rick and Morty API&lt;/h1&gt;
  16.         &lt;/div&gt;
  17.         &lt;div class=&quot;showcase&quot;&gt;
  18.             &lt;div class=&quot;showcase-inner&quot;&gt;
  19.                 &lt;main&gt;&lt;/main&gt;
  20.             &lt;/div&gt;
  21.         &lt;/div&gt;
  22.         &lt;div class=&quot;footer&quot;&gt;
  23.             &lt;ul class=&quot;footer-info&quot;&gt;
  24.                 &lt;li&gt;CHARACTERS: 826&lt;/li&gt;
  25.                 &lt;li&gt;LOCATIONS: 126&lt;/li&gt;
  26.                 &lt;li&gt;EPISODES: 51&lt;/li&gt;
  27.             &lt;/ul&gt;
  28.             
  29.               &lt;div class=&quot;socials&quot;&gt;
  30.                 &lt;a href=&quot;https://github.com/afuh/rick-and-morty-api&quot;&gt;
  31.                   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
  32.                     &lt;path d=&quot;M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z&quot;/&gt;
  33.                   &lt;/svg&gt;
  34.                 &lt;/a&gt;
  35.               
  36.                 &lt;a href=&quot;https://twitter.com/rickandmortyapi&quot;&gt;
  37.                   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
  38.                     &lt;path d=&quot;M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z&quot;/&gt;
  39.                   &lt;/svg&gt;
  40.                 &lt;/a&gt;
  41.               
  42.                 &lt;a href=&quot;https://rickandmortyapi.com/support-us/&quot;&gt;
  43.                   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
  44.                     &lt;path d=&quot;M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z&quot;/&gt;
  45.                   &lt;/svg&gt;
  46.                 &lt;/a&gt;
  47.               &lt;/div&gt;
  48.               
  49.         &lt;/div&gt;
  50.         &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  51.     &lt;/body&gt;
  52. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

  1. /* Chinese translation starts here */
  2. /* 翻译开始 */
  3. /* It looks like the elements in `.socials a` take up too much space on top. If you use `display:flex` it shrinks down to its correct size. */
  4. /* 看起来 `.socials a` 中的元素在顶部占用了太多空间。如果使用 `display:flex`，它将缩小到正确的大小。 */
  6. /* I also left the border colors in my text snippet. This is often a helpful way (other than the dev tools) to find the culprit. */
  7. /* 我还在我的文本片段中保留了边框颜色。这通常是一个有用的方法（除了开发工具之外）来找出问题所在。 */
  9. /* Three more things: 
  10. Be aware of the fact that the padding style of the footer is inherited by its children. I was not sure if you wanted that. */
  11. /* 还有三件事：
  12. 请注意页脚的填充样式会被其子元素继承。我不确定你是否想要这样。 */
  14. /* I also changed the footer with `display:flex` and `flex-direction: column`. */
  15. /* 我还使用了 `display:flex` 和 `flex-direction: column` 更改了页脚。 */
  17. /* Next time it can be helpful if you post a minimal reproducible example. Then it's easier to find the solution. */
  18. /* 下次如果您提供一个最小可复现的示例会很有帮助。这样可以更容易找到解决方案。 */
英文:

It looks like the elements in .socials a take up too much space on top. If you use display:flex it shrinks down to its correct size.

I also left the border colors in my text snippet. This is often a helpful way (other thean the dev tools) to find the culprit.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font-family: system-ui, -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, sans-serif;
  6. }
  8. .top-container{
  9.     padding: 200px;
  10. }
  12. .showcase {
  13.     background-color: rgb(39,43,51);
  14.     width: max-content;
  16. }
  18. .showcase-inner {
  19.     margin: 0;
  20.     padding-top: 30px;
  21.     padding-bottom: 30px;
  22. }
  24. .footer { 
  25.     background-color: rgb(32,35,41);
  26.     font-size: 100px;
  27.     padding-top: 30px;
  28.     display: flex;
  29.     flex-direction: column;
  30.     border: blue solid;
  31. }
  33. h1{
  34.     font-size: 95px;
  35.     text-align: center;
  36.     font-weight: 1000;
  37.     color: rgb(32,35,41);
  38. }
  41. main {
  42.     display: grid;
  43.     grid-template-columns: 1fr 1fr 1fr;
  44.     gap: 0;
  45.     overflow-x: hidden;
  46. }
  48. .image-container{
  49.     display: flex;
  50. }
  52. .image-container img{
  53.     width: 229.2px;
  54.     height: 220px;
  55.     border-radius: 25px;
  56. }
  58. article{
  59.     padding: 10px;
  60. }
  62. .character-card{
  63.     display: flex;
  64.     margin: 13.5px;
  65.     background-color: rgb(60,62,68);
  66.     border-radius: 25px;
  67.     box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
  68. }
  70. .character-info{
  71.     display: flex;
  72.     flex-direction: column;
  73.     padding: 13.5px;
  74.     position: relative;
  75. }
  77. .section{
  78.     display: flex;
  79.     flex-direction: column;
  80.     width: 330px;
  81.     height: 64.33px;
  82.     color: rgb(245,245,245);
  83. }
  85. .greytext{
  86.     color: rgb(158,158,158);
  87. }
  89. .navbar {
  90.     background-color: #ffffff;
  91.     list-style-type: none;
  92.     margin: 0;
  93.     padding: 0;
  94.     overflow: hidden;
  95.     display: flex;
  96.     justify-content: space-between;
  97. }
  99. .navbar li {
  100.     float: left;
  101. }
  103. .navbar li a {
  104.     display: block;
  105.     color: #333;
  106.     text-align: center;
  107.     padding: 14px 16px;
  108.     text-decoration: none;
  109.     transition: color 0.2s;
  110. }
  112. .content-links{
  113.     margin-left: auto;
  114.     padding: 10px;
  115.     margin-right: 10px;
  116.     font-size: 20px;
  117.     font-weight: 750;
  118. }
  120. .content-links a:hover{
  121.     color: rgb(255,152,0);
  122. }
  124. .homebutton{
  125.     margin-right: auto;
  126. }
  128. .homebutton img{
  129.     width: 50px;
  130.     height: 50px;
  131. }
  133. .status {
  134.     display: flex;
  135.     align-items: center;
  136. }
  138. .status-dot {
  139.     width: 8px;
  140.     height: 8px;
  141.     border-radius: 50%;
  142.     display: inline-block;
  143.     margin-right: 5px;
  144. }
  145.   
  146. .status-dot.grey {
  147.     background-color: rgb(158,158,158);
  148. }
  149.   
  150. .status-dot.red {
  151.     background-color: rgb(214,61,46);
  152. }
  153.   
  154. .status-dot.green {
  155.     background-color: rgb(85,204,68);
  156. }
  157.   
  158. .about-content{
  159.     display: flex;
  160.     flex-direction: column;
  161.     padding: 5px;
  162.     margin-left: 500px;
  163.     margin-right: 500px;
  164.     font-size: 110%;
  165.     color: rgb(66,66,66);
  166. }
  168. .abouth2 {
  169.     font-size: 35px;
  170.     font-weight: 800;
  171.     margin-bottom: 30px;
  172.     color: rgb(32,35,41);
  173. }
  175. .abouth3 {
  176.     font-size: 25px;
  177.     font-weight: 800;
  178.     margin-top: 10px;
  179.     margin-bottom: 10px;
  180.     color: rgb(32,35,41);
  181. }
  183. .ablink {
  184.     text-decoration-color: rgb(255,152,0);
  185.     text-decoration-thickness: 2px;
  186.     text-underline-offset: 4px;
  187.     color: rgb(66,66,66);
  188. }
  190. .ablink:hover {
  191.     text-decoration: none;
  192.     color: rgb(255,152,0);
  193.     transition: color 0.2s;
  194. }
  196. .footer-info {
  197.     display: flex;
  198.     justify-content: center;
  199.     list-style: none;
  200.     padding-top: 40px;
  201.     margin: 0;
  202.     font-size: 15px;
  203.     font-weight: 750;
  204.     color: rgb(158, 158, 158);
  205.     border: red solid;
  206.     padding-top: 0px;
  207. }
  209. .footer-info li {
  210.     margin-right: 20px;
  211. }
  213. .socials {
  214.     display: flex;
  215.     padding-top: 0px;
  216.     justify-content: center;
  217.     align-items: center;
  218.     border: yellow solid;
  219. }
  221. .socials a {
  222.     display: flex;
  223.     margin: 10px;
  224.     border: green solid;
  225. }
  227. .socials a:hover svg path {
  228.     fill: rgb(255, 152, 0);
  229. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3.     &lt;head&gt;
  4.         &lt;title&gt;Rick and Morty API&lt;/title&gt;
  5.         &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.         &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  7.     &lt;/head&gt;
  9.     &lt;body&gt;
  10.         &lt;ul class=&quot;navbar&quot;&gt;
  11.             &lt;li class=&quot;homebutton&quot;&gt;&lt;a href=&quot;landing.html&quot;&gt;&lt;img src=&quot;RMAPI-homepagebutton.png&quot; alt=&quot;Home&quot;&gt;&lt;/a&gt;&lt;/li&gt;
  12.             &lt;li class=&quot;content-links&quot;&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  13.         &lt;/ul&gt;
  14.         &lt;div class=&quot;top-container&quot;&gt;
  15.             &lt;h1&gt;The Rick and Morty API&lt;/h1&gt;
  16.         &lt;/div&gt;
  17.         &lt;div class=&quot;showcase&quot;&gt;
  18.             &lt;div class=&quot;showcase-inner&quot;&gt;
  19.                 &lt;main&gt;&lt;/main&gt;
  20.             &lt;/div&gt;
  21.         &lt;/div&gt;
  22.         &lt;div class=&quot;footer&quot;&gt;
  23.             &lt;ul class=&quot;footer-info&quot;&gt;
  24.                 &lt;li&gt;CHARACTERS: 826&lt;/li&gt;
  25.                 &lt;li&gt;LOCATIONS: 126&lt;/li&gt;
  26.                 &lt;li&gt;EPISODES: 51&lt;/li&gt;
  27.             &lt;/ul&gt;
  28.             
  29.               &lt;div class=&quot;socials&quot;&gt;
  30.                 &lt;a href=&quot;https://github.com/afuh/rick-and-morty-api&quot;&gt;
  31.                   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
  32.                     &lt;path d=&quot;M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z&quot;/&gt;
  33.                   &lt;/svg&gt;
  34.                 &lt;/a&gt;
  35.               
  36.                 &lt;a href=&quot;https://twitter.com/rickandmortyapi&quot;&gt;
  37.                   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
  38.                     &lt;path d=&quot;M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z&quot;/&gt;
  39.                   &lt;/svg&gt;
  40.                 &lt;/a&gt;
  41.               
  42.                 &lt;a href=&quot;https://rickandmortyapi.com/support-us/&quot;&gt;
  43.                   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 24 24&quot; class=&quot;social-icon&quot; style=&quot;fill: rgb(158, 158, 158);&quot;&gt;
  44.                     &lt;path d=&quot;M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z&quot;/&gt;
  45.                   &lt;/svg&gt;
  46.                 &lt;/a&gt;
  47.               &lt;/div&gt;
  48.               
  49.         &lt;/div&gt;
  50.         &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  51.     &lt;/body&gt;
  52. &lt;/html&gt;

<!-- end snippet -->

Three more things:
Be aware of the fact that the padding style of the footer is inherited by its children. I was not sure if you wanted that.
I also changed the footer with display:flex and flex-direction: column.
Next time it can be helpful if you post a minimal reproducible example. Then its easier to find the solution.

huangapple
  • 本文由 发表于 2023年6月8日 18:56:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76431124.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定