header-main 和 main-footer 之间的空白

Question

There is some white space between header-main and main-footer. header-main 和 main-footer 之间有一些空白。 I would prefer to either color them as the rest of the website or remove them completely.我更愿意将它们着色为网站的 rest 或完全删除它们。 Basically, I dont care about the space as long as it has the same color as the rest of the website #fefcf5.基本上，我不在乎空间，只要它与网站#fefcf5的rest颜色相同即可。

Hope this edited version works better thank you希望这个编辑后的版本更好用谢谢

 @import '_common/normalize'; html { font-size: $global-font-size; box-sizing: border-box; } body { padding: 10px; margin: 0; font-family: "Noto Serif", Serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.7; color: #0a0a0a; background-color: #fefcf5;important: scroll-behavior; smooth: border-top; 3px solid $theme-color: min-height: 100vh } @include max-screen() { body { border-top; 0: } }::selection { background; #fefcf5: color; #fefcf5: } img { max-width; 100%: height; auto: display; inline-block: vertical-align; middle: } a { color; $global-font-color: text-decoration; none, } @each $header: $size in $global-headings { #{$header} { font-size; $size: font-family; $global-serif-font-family. } }:container { margin; 0 auto: width; $global-body-width: background-color; #fefcf5. }:header { background-color; #fefcf5: margin; 0. }:footer { background-color; #fefcf5: margin; 0. }:content-wrapper { padding; $global-container-padding: background-color; #fefcf5: min-height; 100vh. } @include max-screen() {:container { width; 100%: box-shadow; -1px -5px 5px $gray; } }

 <html lang="en"> <head> <script src="/livereload.js?mindelay=10&amp;v=2&amp;port=4321&amp;path=livereload" data-no-instant="" defer=""> </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Archive - </title> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Cache-Control" content="no-transform"> <meta http-equiv="Cache-Control" content="no-siteapp"> <meta name="theme-color" content="#f8f5ec"> <meta name="msapplication-navbutton-color" content="#f8f5ec"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec"> <meta name="author" content="olOwOlo"><meta name="description" content="My blog."><meta name="keywords" content="Hugo, theme, even"> <meta name="generator" content="Hugo 0.80.0 with theme even"> <link rel="canonical" href="http://localhost:4321/post/"> <link href="http://localhost:4321/post/index.xml" rel="alternate" type="application/rss+xml" title=""> <link href="http://localhost:4321/post/index.xml" rel="feed" type="application/rss+xml" title=""> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <link href="/sass/main.min.cad70304a3d0362f803f550da3a0b3d60057071adac974b42cd0570e36f7b9ed.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous"> <meta property="og:title" content="Posts"> <meta property="og:description" content="My blog."> <meta property="og:type" content="website"> <meta property="og:url" content="http://localhost:4321/post/"> <meta property="og:updated_time" content="2021-02-09T21:17:34+01:00"> <meta itemprop="name" content="Posts"> <meta itemprop="description" content="My blog."> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Posts"> <meta name="twitter:description" content="My blog."> <:--[if lte IE 9]> <script src="https.//cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min:js"></script> <.[endif]--> <.--[if lt IE 9]> <script src="https.//cdn.jsdelivr.net/npm/html5shiv@3.7:3/dist/html5shiv.min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <:[endif]--> </head> <body data-new-gr-cs-check-loaded="14:994.0" data-gr-ext-installed=""> <div id="mobile-navbar" class="mobile-navbar"> <div class="mobile-header-logo"> <a href="/" class="logo">name</a> </div> <div class="mobile-navbar-icon"> <span></span> <span></span> <span></span> </div> </div> <nav id="mobile-menu" class="mobile-menu slideout-menu slideout-menu-left"> <ul class="mobile-menu-list"> <a href="/post/"> <li class="mobile-menu-item">Posts</li> </a><a href="/tags/"> <li class="mobile-menu-item">Tags</li> </a><a href="/categories/"> <li class="mobile-menu-item">CV</li> </a><a href="/about/"> <li class="mobile-menu-item">About</li> </a> </ul> </nav> <div class="container slideout-panel slideout-panel-left" id="mobile-panel"> <header id="header" class="header"> <div class="logo-wrapper"> <a href="/" class="logo">name</a> </div> <nav class="site-navbar"> <ul id="menu" class="menu"> <li class="menu-item"> <a class="menu-item-link" href="/post/">Posts</a> </li><li class="menu-item"> <a class="menu-item-link" href="/tags/">Tags</a> </li><li class="menu-item"> <a class="menu-item-link" href="/categories/">CV</a> </li><li class="menu-item"> <a class="menu-item-link" href="/about/">About</a> </li> </ul> </nav> </header> <main id="main" class="main"> <div class="content-wrapper"> <div id="content" class="content"> <section id="archive" class="archive"> <div class="collection-title"> <h2 class="archive-year">2021</h2> </div> <div class="archive-post"> <span class="archive-post-time"> 02-09 </span> <span class="archive-post-title"> <a href="/post/2021-02-09-first-post/" class="archive-post-link"> first post </a> </span> </div> <div class="collection-title"> <h2 class="archive-year">2020</h2> </div> <div class="archive-post"> <span class="archive-post-time"> 12-01 </span> <span class="archive-post-title"> <a href="/post/2020-12-01-r-rmarkdown/" class="archive-post-link"> Hello R Markdown </a> </span> </div> <div class="collection-title"> <h2 class="archive-year">2018</h2> </div> <div class="archive-post"> <span class="archive-post-time"> 07-10 </span> <span class="archive-post-title"> <a href="/post/even-preview/" class="archive-post-link"> Theme preview </a> </span> </div> <div class="archive-post"> <span class="archive-post-time"> 03-08 </span> <span class="archive-post-title"> <a href="/post/hidden-post/" class="archive-post-link"> This is a hidden post: </a> </span> </div> <div class="collection-title"> <h2 class="archive-year">2017</h2> </div> <div class="archive-post"> <span class="archive-post-time"> 08-31 </span> <span class="archive-post-title"> <a href="/post/english-preview/" class="archive-post-link"> [English] Creating a New Theme </a> </span> </div> <div class="archive-post"> <span class="archive-post-time"> 08-30 </span> <span class="archive-post-title"> <a href="/post/japanese-preview/" class="archive-post-link"> [日本語] 敬語体系 </a> </span> </div> <div class="archive-post"> <span class="archive-post-time"> 08-30 </span> <span class="archive-post-title"> <a href="/post/chinese-preview/" class="archive-post-link"> [中文] 《长恨歌》 </a> </span> </div> <div class="collection-title"> <h2 class="archive-year">2016</h2> </div> <div class="archive-post"> <span class="archive-post-time"> 08-30 </span> <span class="archive-post-title"> <a href="/post/shortcodes/" class="archive-post-link"> Shortcodes </a> </span> </div> <div class="collection-title"> <h2 class="archive-year">2015</h2> </div> <div class="archive-post"> <span class="archive-post-time"> 03-04 </span> <span class="archive-post-title"> <a href="/post/js-flowchart-diagrams/" class="archive-post-link"> JS Flowchart Diagrams </a> </span> </div> <div class="archive-post"> <span class="archive-post-time"> 03-04 </span> <span class="archive-post-title"> <a href="/post/js-sequence-diagrams/" class="archive-post-link"> JS Sequence Diagrams </a> </span> </div> <div class="collection-title"> <h2 class="archive-year">2011</h2> </div> <div class="archive-post"> <span class="archive-post-time"> 08-30 </span> <span class="archive-post-title"> <a href="/post/syntax-highlighting/" class="archive-post-link"> Syntax Highlighting </a> </span> </div></section> <nav class="pagination"> </nav> </div> </div> </main> <footer id="footer" class="footer"> <div class="social-links"> <a href="mailto:" class="iconfont icon-email" title="email"></a> <a href="https://app.netlify:com/sites/n/settings/general" class="iconfont icon-linkedin" title="linkedin"></a> <a href="http.//localhost:1313" class="iconfont icon-github" title="github"></a> <a href="http.//localhost:4321/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a> </div> <div class="copyright"> <span class="power-by"> Powered by <a class="hexo-link" href="https://gohugo;io">Hugo</a> </span> <span class="division">|</span> <span class="theme-info"> Theme - <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a> </span> <span class="copyright-year"> © 2017 - 2021<span class="heart"><i class="iconfont icon-heart"></i></span><span>olOwOlo</span> </span> </div> </footer> <div class="back-to-top" id="back-to-top" style="display. none."> <i class="iconfont icon-up"></i> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/jquery@3:2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/slideout@1:0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script> <script type="text/javascript" src="/js/main.min.c12618f9a600c40bd024996677e951e64d3487006775aeb22e200c990006c5c7.js"></script> </body></html>

// ==============================
// Variables
// ==============================

// ========== Theme Color ========== //
// Config here to change theme color
// Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
$theme-color-config: 'Default';

// Default theme color map
$theme-color-map: (
  'Default': #5589b9 #fefcf5,
  'Mint Green': #16982B #f5f5f5,
  'Cobalt Blue': #0047AB #f0f2f5,
  'Hot Pink': #FF69B4 #f8f5f5,
  'Dark Violet': #9932CC #f5f4fa
);

// Check theme color config.
// if it does not exist, use default theme color.
@if not(map-has-key($theme-color-map, $theme-color-config)) {
  $theme-color-config: 'Default';
}
$theme-color-list: map-get($theme-color-map, $theme-color-config);

// Default theme color of the site.
$theme-color: nth($theme-color-list, 1) !default;

// Deputy theme color of the site.
$deputy-color: nth($theme-color-list, 1) !default;


// ========== Color ========== //
$default: #fefcf5 !default;
$black: #0a0a0a !default;
$white: #fefefe !default;
$light-gray: #e6e6e6 !default;
$gray: #cacaca !default;
$dark-gray: #8a8a8a !default;


// ========== Global ========== //
// Text color of the body.
$global-font-color: #2569a8 !default;

// Font size attribute applied to '<html>' and '<body>'.
$global-font-size: 16px !default;

// Global width of '<body>'.
$global-body-width: 800px !default;

// Padding of container main
$global-container-padding: 0 20px !default;

// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px.
$global-lineheight: 1.5 !default;

// Font family of the site.
$global-font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif !default;

// Serif font family of the site.
$global-serif-font-family: Athelas, STHeiti, Microsoft Yahei, serif !default;

// Background color of the site.
$global-background: $default;

// Headings font size of the site.
$global-headings: (
  h1: 26px,
  h2: 24px,
  h3: 20px,
  h4: 16px,
  h5: 14px,
  h6: 14px
) !default;


// ========== Header ========== //
// Padding of the site header.
$header-padding: 20px 20px !default;

// Font family: Chancery
@font-face {
  font-family: 'Chancery';
  src: url('../fonts/chancery/apple-chancery-webfont.eot');
  src: local('Apple Chancery'), url('../fonts/chancery/apple-chancery-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/chancery/apple-chancery-webfont.woff2') format('woff2'),
  url('../fonts/chancery/apple-chancery-webfont.woff') format('woff'),
  url('../fonts/chancery/apple-chancery-webfont.ttf') format('truetype'),
  url('../fonts/chancery/apple-chancery-webfont.svg#apple-chancery') format('svg');
  font-weight: lighter;
  font-style: normal;
  font-display: swap;
}

// Font size of the logo.
$logo-font-size: 26px !default;

// Font family of the logo.
$logo-font-family: 'Chancery', cursive, LiSu, sans-serif !default;

// Margin of menu item.
$menu-item-margin-left: 10px !default;

// Margin of menu item in mobile.
$menu-item-mobile-margin: 5px !default;

// Font size of menu item link.
$menu-link-font-size: 18px !default;

// Height of the mobile header.
$mobile-navbar-height: 50px !default;

// ========== Post ========== //
// Margin bottom of post list.
$post-list-margin-bottom: 15px !default;

// Padding of the post.
$post-padding: 1.5em 0 !default;

// Border top of the post + post.
$post-border: 1px solid $light-gray !default;

// Font size of post title.
$post-title-font-size: 27px !default;

// Font weight of post title.
$post-title-font-weight: 400 !default;

// Margin top of the post meta (post time).
$post-meta-margin-top: 5px !default;

// Font color of the post meta.
$post-meta-font-color: $dark-gray !default;

// Border bottom of the read more link when hover it.
$post-readMore-border-bottom: 1px solid $theme-color !default;

// Margin top of the post footer.
$post-footer-margin-top: 20px !default;

// Border top of post footer.
$post-footer-border-top: 1px solid $light-gray !default;

// Padding of the post tags.
$post-tags-padding: 15px 0 !default;

// Font size of post pagination.
$post-nav-font-size: 18px !default;


// ========== TOC ========== //
// Width of the post toc.
$post-toc-width: 200px !default;

// Backgroud color of the post toc.
$post-toc-backgroud: rgba($deputy-color, 0.6) !default;

// Margin left of the post toc.
$post-toc-margin-left: $global-body-width - 15px !default;

// Font size of the post toc title.
$post-toc-title-size: 20px !default;

// Font size of the post toc content.
$post-toc-content: 15px !default;

// List style of the post toc list.
$post-toc-list-style: square !default;

// Max screen media of the post toc.
$toc-max-sreen-width: 2 * $post-toc-width + $post-toc-margin-left !default;

// ========== Content ========== //
// Headings anchor.
$content-headings-anchor: "" !default;

// Border bottom of the link when hover it.
$content-link-border: 1px solid $theme-color !default;

// Background color of the blockquote.
$content-blockquote-backgroud: rgba($theme-color, 0.05) !default;

// Border left of the blockquote.
$content-blockquote-border-left: 3px solid rgba($theme-color, 0.3) !default;

// Border color of the table.
$content-table-border-color: darken($deputy-color, 3%) !default;

// ========== Code ========== //
// Color of the code.
$code-color: #c7254e !default;

// Font size of code.
$code-font-size: 0.9em !default;

// Font family of the code.
$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono",
 "Bitstream Vera Sans Mono", "Courier New", monospace !default;

// Color of code highlight, solarized.
$code-highlight-color: (
  comment: #93a1a1,
  keyword: #859900,
  number: #2aa198,
  title: #268bd2,
  attribute: #b58900,
  symbol: #cb4b16,
  built_in: #dc322f,
  formula: #eee8d5
) !default;

// Code type list.
$code-type-list: (
  // Custom code type
  language-bash: "Bash",
  language-c: "C",
  language-cs: "C#",
  language-cpp: "C++",
  language-css: "CSS",
  language-coffeescript: "CoffeeScript",
  language-html: "HTML",
  language-xml: "XML",
  language-http: "HTTP",
  language-json: "JSON",
  language-java: "Java",
  language-js: "JavaScript",
  language-javascript: "JavaScript",
  language-makefile: "Makefile",
  language-markdown: "Markdown",
  language-objectivec: "Objective-C",
  language-php: "PHP",
  language-perl: "Perl",
  language-python: "Python",
  language-ruby: "Ruby",
  language-sql: "SQL",
  language-shell: "Shell",

  language-erlang: "Erlang",
  language-go: "Go",
  language-go-html-template: "Go HTML Template",
  language-groovy: "Groovy",
  language-haskell: "Haskell",
  language-kotlin: "Kotlin",
  language-clojure: "Clojure",
  language-less: "Less",
  language-lisp: "Lisp",
  language-lua: "Lua",
  language-matlab: "Matlab",
  language-rust: "Rust",
  language-scss: "Scss",
  language-scala: "Scala",
  language-swift: "Swift",
  language-typescript: "TypeScript",
  language-yml: "YAML",
  language-yaml: "YAML",
  language-toml: "TOML",
  language-diff: "Diff"
) !default;

// Color of the code background.
$code-background: $deputy-color !default;


// ========== Pagination ========== //
// Margin of the pagination.
$pagination-margin: 2em 0 !default;

// Font size of the pagination (Without post, post pagination see line 140).
$pagination-font-size: 20px !default;


// ========== Footer ========== //
// Margin top of the footer.
$footer-margin-top: 2em !default;

// Margin left of the social link.
$social-link-margin-left: 10px !default;

// Font size of the social icon.
$social-icon-font-size: 30px !default;

// Margin of the copyright.
$copyright-margin: 10px 0 !default;


// ========== Archive ========== //
// Margin of the archive.
$archive-margin: 2em 0px !default;

// Max width of the archive.
$archive-max-width: 550px !default;

// Font size of the archive name.
$archive-name-font-size: 30px !default;

// Font size of the collection title.
$collection-title-font-size: 28px !default;

// Padding of the archive post.
$archive-post-padding: 3px 20px !default;

// Padding of the archive post in mobile.
$archive-post-mobile-padding: 5px 10px !default;

// Font size of the archive post time in mobile.
$archive-post-mobile-time-font-size: 13px !default;

// Border left of the archive post, use $archive-post-hover-border-left when hover it.
$archive-post-border-left: 1px solid $gray !default;
$archive-post-hover-border-left: 3px solid $theme-color !default;

// Transition of the archive post when hover it.
$archive-post-hover-transition: 0.2s ease-out !default;

// Transform of the archive post when hover it.
$archive-post-hover-transform: translateX(4px) !default;

// ========== General Terms ========== //
// Font size of the terms title.
$terms-title-size: 18px !default;

// Border bottom of the terms title.
$terms-title-border-bottom: 2px solid $theme-color !default;

// Margin of the terms link.
$terms-link-margin: 5px 10px !default;

// Font size of the terms count
$terms-count-font-size: 12px !default;

Answer 1

Set margin-top: 0 for .archive.collection-title:first-child.archive-year为.archive.collection-title:first-child.archive-year设置margin-top: 0

That white space above "2021" is the top margin of the first h2 with class .archive-year (15px) which goes out of its container ("collapsing margins") “2021”上方的空白是第一个h2的上边距，其中 class .archive-year (15px) 超出其容器（“折叠边距”）

If you want to keep the distance, use padding-top: 15px additionally for that selector.如果要保持距离，请对该选择器另外使用padding-top: 15px 。

Answer 2

Try this in your code, on class .archive instead of margin replace to padding .在您的代码中尝试此操作，在 class .archive而不是margin替换为padding 。

header-main 和 main-footer 之间的空白

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-02-11 13:33:01

解决方案2
0 2021-02-11 13:16:50

header-main 和 main-footer 之间的空白

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-02-11 13:33:01

解决方案2 0 2021-02-11 13:16:50

解决方案1
1 已采纳 2021-02-11 13:33:01

解决方案2
0 2021-02-11 13:16:50