时间戳

首页 > 解决方案 > 无法解析在页面顶部创建空白的 html 标记

html - 无法解析在页面顶部创建空白的 html 标记

问题描述

正如标题所述，我无法摆脱网页顶部和底部的空白。我已经尝试更改我的代码好几个小时了，但一直无法解决这个问题。我真诚地感谢您提供的任何帮助（我是网页设计的新手，这是我的第一个项目之一，所以请善待:)。

在开发人员工具中检查后，html 标记是导致此空间的原因（特别是 HTML element.style）。

我意识到这个问题已经被问了很多。但是，我在这里阅读了大约 20 个相关页面，并尝试了其中的答案来解决问题，但都无济于事。

我试图删除空间的事情：

我正在使用规范化样式表（不纠正问题）。

在 CSS 中将 HTML 溢出更改为隐藏，将高度/边距更改为 0。

将溢出自动或隐藏添加到 CSS 中的通用选择器规则。

请让我知道您是否还有其他可以想到的我应该尝试的方法。我真诚地感谢你的时间^^

HTML：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>shaun's portfolio</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="page-wrapper">
            <!--[if lt IE 7]>
                <p class="browse">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
            <div class="header-wrapper">
                <header>
                    <nav>
                        <div class="header-row-1">
                        <p id="title">Shaun</p>
                        <ul>
                            <li><h2><a href="#">Home</a></h2></li>
                            <li><h2><a href="#portfolio">Portfolio</a></h2></li>
                            <li><h2><a href="#contact">Contact</a></h2></li>
                        </ul>
                        </div>
                        <div class="header-row-2">
                            <img id="main-pic" src="responsive-layout-profile.png" alt="">
                            <h2 id="main-topic">Hello! My name is Shaun. I am a Front-End Developer who loves all things design.  
                                I am currently finishing my degree in Front-End Web Development at TreeHouse.  I am excited to 
                            show the world what I can do!</h2>
                        </div>
                    </nav>
                </header>
            </div>
            <!-- Header Div -->
            <div class="main-wrapper">
                <h3 id="portfolio">PORTFOLIO</h3>
                <img src="portfolio-1.png" alt="Marketing site project portfolio image">
                <p>This project shows the front page of a marketing website that I created for a local business.</p>

                <img src="portfolio-2.png" alt="Search project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-3.png" alt="Travel App portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-4.png" alt="GPS map project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-5.png" alt="Photo gallery project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-6.png" alt="Calculator project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>
            </div>

            <footer>
                <h3 id="contact">CONTACT</h3>
                <p>Please get a hold of me at the information below: </p>
                <p>Phone: <strong>+1(333)555-8989</strong></p>
                <a id="email" href="mailto: shaun@gmail.com">Email: <strong>shaun@Gmail.com</strong></a>
                <hr>

                <div class="contact-info">
                    <h3>Shaun</h3>
                    <h3><a href="#">BACK TO TOP</a></h3>
                </div>
            </footer>
        </div>
         <!-- Page-Wrapper Div -->
    </body>
</html>

CSS：

* {  
    box-sizing: border-box;
}

/* Web Fonts ------*/

@font-face {
    font-family: 'BoxedSemibold';
    src: url('bBoxedSemibold.eot');
    src: url('BoxedSemibold.eot?#iefix') format('embedded-opentype'),
    url('BoxedSemibold.woff') format('woff'),
    url('BoxedSemibold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BoxedThin';
    src: url('boxedThin.eot');
    src: url('boxedThin.eot?#iefix') format('embedded-opentype'),
    url('boxedThin.woff') format('woff'),
    url('boxedThin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
    font-family: 'BoxedLight';
    src: url('BoxedLight.eot');
    src: url('BoxedLight.eot?#iefix') format('embedded-opentype'),
    url('BoxedLight.woff') format('woff'),
    url('BoxedLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Basic Styles ------*/

body {
    margin: 0 auto;
    min-width: 320px;
}

h1,
li {
    font-family: "BoxedThin";

}

h2 {
    font-family: "BoxedLight" ;
    color: #646464;
    text-align: center;
}



/* link Styles ------*/

nav a {
    padding: 30px;
}

li {
    flex-direction: column;
    list-style-type: none;
}

a:link, a:visited {
    background-color: #ffffff;
    color: rgb(75, 75, 75);
    text-align: center;
    text-decoration: none;
}

a:hover, a:active {
    color: rgb(0, 204, 255 );
}

p {
    font-size: 18pt;
}

#portfolio,
#contact {
    text-align: center;
    font-family: "BoxedSemibold";
    font-size: 18pt;
    width: 100%;
}

/* Header Styles ------*/

.header-row-1 {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.header-row-2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;

}

#title {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    font-family: "BoxedSemibold";
    font-size: 28pt;
    height: 40px;
    width: 100%;
}

header {
    width: 100vw;
    margin-top: 40px;
}

#main-pic {
    display: flex;
    margin: 0 auto;
}

#main-topic {
    display: flex;
    width: 80%;
    margin: 0 auto;
}

/* Navigation ------*/


nav {
    display: flex;
    flex-direction: column;
    background-color: #f5f4f4;
}

nav h2 {
    width: 90%;
}


ul {
    display: flex;
    flex-direction: column;
    width: 90vw;
    margin: 0 auto;
    padding: 0;
}

ul a{
    justify-content: center;
    display: flex;
    margin: 10px 0;
}

ul h2 {
    margin: 0 auto;
}

li {
background-color: #ffffff;
margin: 5px;
}


/* Body ------*/

.main-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #ffffff;
    width: 87vw;
    margin: 0 auto;
    text-align: center;
}

.main-wrapper p {
    width: 100vw;
    font-family: "BoxedLight" ;
    color: #646464;
}

.main-wrapper img {
    width: 80%;
    flex: 1;   
    padding: 10px;
    margin: 10px;
    justify-content: center;
}

/* Footer ------*/

footer {
    text-align: center;
    margin: 0 auto;
    background-color: #e7e3e3;
    width: 100vw;
    padding-top: 10px;
    font-family: "BoxedLight";
}

footer p {
    width: 90%;
    margin: 20px auto;
}

#email {
    background-color: #e7e3e3;
    font-family: "BoxedLight";
    font-size: 18pt;
    color: rgb(0, 0, 0);
}

hr {
    height: 4px;
    width: 80%;
}

.contact-info {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    margin: 0 30px 5px 30px;
}

.contact-info a{
    background-color: #e7e3e3;
}

标签： htmlcss

解决方案

要解决此问题，您可以将此行添加到您的 css 代码中

{ margin: 0 !important; }

推荐阅读