随机空格 HTML5

【问题标题】：Random Blank Space HTML5随机空格 HTML5
【发布时间】：2015-04-21 06:11:34
【问题描述】：

我查看了所有内部网，试图找出我的问题的解决方案，但我还没有找到任何我尚未尝试过的解决方案。

我的网页上有一个空间，代码为 0，没有边距，没有填充，没有边框，只有两个元素，相隔约 300 像素...什么也没有。没有代码或边距会导致这种情况发生。这是我的代码：

<!DOCTYPE html>
冥想指南
  • 首页
  • 类
  • 博客
  • 关于

    • 想学习如何打坐？

    加入课程 你来对地方了！ 为什么冥想？ 快速棕色 狐狸跳过慢棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸 跳过缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。 敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。敏捷的棕色狐狸跳过了缓慢的棕色 乌龟。 
    * {
padding-left: 0;
border-left: 0;
margin-left: 0; 
margin-right: 0;
padding-right: 0;
border-right: 0;
}

html, body, header, div, span, h1, h2, h3, h4, h5, h6, p, img, ol, ul, li, form, label, table, caption, tbody,tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;    
}

.html {
    font-size: 100%; 
    background: url('assets/background.png') no-repeat center fixed; 
    -ms-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 350px) {

}

.head {
    width: 100%;
    overflow: hidden;
}

#nav {
    position: fixed;
    max-height: 10%;
    top: 0;
    width: 100%;
    background: linear-gradient(to bottom, #FFAD5C , #FF9933);
    border-right: none;
    z-index: 1;
    overflow: hidden;
    clear: both;
    margin: 0;
    border: 0;
    padding: 0;
}

#nav ul {
    float: inherit;
    top: 10px;
    height: 10%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

#nav li {
    list-style: none;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10px;
    text-align: center;
    border-left: none;
    border-right: none;
    width: 16.6667%; /* fallback for non-calc() browsers */
    width: calc(100% / 5);
    height: 75px;
    overflow: hidden;
    box-sizing: border-box;
}

#nav li:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
    background: #FF7F47;
}

.hvr-fade:focus, .hvr-fade:active {
    background-color: #2098d1;
    color: white;
    background: #FF7F47;
    -webkit-animation: pulsate 1.2s linear infinite;
}

#nav li a {
    display: inherit;
    font-family: 'Roboto' serif;
    text-decoration: none;
    color: #FFFFFF;
    padding: 12px 0;
    font-size: 1.3em;
}

/*jumbotron*/ /*jumbotron*/ /*jumbotron*/ /*jumbotron*/ /*jumbotron*/ 

.jumbotron {
    display: flex;
    background-image: url('assets/meditate.jpg');
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: auto;
    top: 0;
    padding-top: 80px;
}

.jumbotron button {
    position: inherit;
    top: 50%;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 20px auto;
    color: #FFF;
    background: -webkit-linear-gradient(#FFAD5C, #FF9933);
    background: linear-gradient(#FFAD5C, #FF9933);
    border: 0 none;
    border-radius: 3px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}

.jumbotron button:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}

@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 
    0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 
    0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button:active {
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}

.jumbotron a {
    color: #fff;
    text-decoration: none;
}


/*body*/ /*body*/ /*body*/ /*body*/ /*body*/ /*body*/

.body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
    padding-top: 1%;
}

.bodyflex1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    padding-top: 0px;
    justify-content: flex-start;
    margin: 1%;
}

/*column1*/ /*column1*/ /*column1*/ /*column1*/ /*column1*/

.column1 {
    -webkit-box-flex: 2;      
    -moz-box-flex: 2;         
    -webkit-flex: 2;          
    -ms-flex: 2;              
    flex: 2;
    padding: 2%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    padding-top: 0px;
    margin: 1%;
    -webkit-box-shadow: 2px 2px 4px 4px #ccc;
    -moz-box-shadow: 2px 2px 4px 4px #ccc;
    box-shadow: 2px 2px 4px 4px #ccc;
}

.flextable {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    height: 100px;
    padding: 2%;
    padding-top: 0px;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.flexlist {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30%;
    height: auto;
    font-size: 2.7em;
    font-family: 'Roboto';
    margin: 10px 10px 10px 10px;
    padding: 2%;
}

/*column2*/ /*column2*/ /*column2*/ /*column2*/ /*column2*/

.column2 {
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2%;
    width: 0;
    flex-grow: 1;
    border-top: 0px;
    margin-top: 1.0000001%;
    padding-top: 0px;
    flex-direction: row;
    -webkit-box-shadow: 2px 2px 4px 4px #ccc;
    -moz-box-shadow: 2px 2px 4px 4px #ccc;
    box-shadow: 2px 2px 4px 4px #ccc;
}

.cssad {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    box-sizing: inherit;
    width: 100%;
    padding: 2%;
}

/*font*/ /*font*/ /*font*/ /*font*/ /*font*/ /*font*/ /*font*/ 

.jumbotron h3, h4 {
    color: #FFFFFF; text-shadow: 0 1px 0 #444, 0 0 5px #ffd, 0 0 5px #000;
    text-align: center;
    position: inherit;
    font-size: 2.4em;
    font-family: 'Montserrat', sans-serif;
    padding: 18px;
    margin-bottom: 0;
} 

.orange {
    font-size: 3em;
    color: orange;
    text-shadow: 1px 1px #ccc;
    height: 100%;
    margin-top: 10;
    margin-bottom: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    display: block;
    line-height: 100%;
    white-space: nowrap;
}

.bodyp {
    font-size: 3em;
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    padding-top: 0;
    margin-top: 10;
    box-sizing: border-box;
    display: block;
    line-height: 100%;
    white-space: -pre-wrap;
}

.bodyp1 {
   margin-top: -250px;
    font-size: 3em;
    font-weight: 200;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    display: block;
    line-height: 100%;
    white-space: -pre-wrap;
}
@media all and (max-width: )

    我没有使用 html、head 和 body 标签，而是使用了无序列表，希望让 flexbox 能够正常工作，这可能是它无法正常工作的一个原因。我还尝试在 header3 和段落元素之间添加注释，但这显然不起作用。

    我正在使用 Cloud9 (c9.io) 代码编辑器。在 CSS 中，我尝试将 margin-top 设为负值，但也无法始终如一地工作。当我从谷歌浏览器打开代码检查器时，它会显示我的标题 3 和段落元素，中间没有任何内容，也没有边距、填充或边框，防止标题 3 和段落靠得更近。我真的迷路了。

    如果您需要查看我所有代码的链接或需要更多信息，请告诉我。这是我在这里的第一篇文章，因为通常我可以自己解决问题，但在这种情况下，我似乎遇到了一个不可能的情况。如果您有时间，请随时告诉我是否有什么可以改进我的代码的方法。

    编辑：我已经将边距和填充设置为 0。它不起作用。检查元素显示我的 p 和 h3 元素中有 0 边距或填充。

    【问题讨论】：

      标签： html css text formatting margin


      【解决方案1】：

      默认 h1 和 p 标签在顶部和底部占用额外的边距。您可以像这样删除它：

      h3{
    margin:0;
}
p
{
    margin:0;
}

      Fiddle link

      【讨论】：

      • 我已经尝试过了，但没有成功。 Google Chrome 检查元素甚至在我的 h3 和 p 元素上显示 0 边距和填充。
      • @DaltonHaberman 你检查过我在 chrome 中的小提琴吗？这里看起来不错。
      【解决方案2】：

      我发现在开始正常 CSS 之前重置所有边距、填充和边框最有用。最简单的方法就是将此代码放在所有 CSS 文件的开头

      html, body, header, div, span, h1, h2, h3, h4, h5, h6, p, img, ol, ul, li, form, label, table, caption, tbody,tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;    
}

      如果这不起作用，请提供您的 CSS，以便我们查看。

      P.S 我不认为使用

    • 是一个很好的做法。使用普通标签，如果需要对文本进行分组，可以使用 和 。

      P.S2 如果这是一个仅使用一次的元素，请考虑使用“id”而不是“class”。

      • 【讨论】：

      • 我认为这行得通，但它只适用于一定的宽度。不知何故，当我使 p 元素文本变宽时，它会向上移动到标题。当我把它变小时，它会向下移动。有什么建议么？我将把我所有的 html 和 css 都放在我的问题中。
      【解决方案3】：

      伙计，很简单。所有浏览器对“margins”、“paddings”、“borders”等默认细节都有自己的解释。因此，在开始任何新项目之前，您必须在您的 css 中添加以下代码：

      *{margin:0px;padding:0px;}

      现在，编写您的代码。未经您的同意，您不会在任何地方找到任何空间！快乐编码！

      【讨论】：

      • 我已经用通用选择器试过了，但没有用。 Google Chrome 检查元素甚至在我的 h3 和 p 元素上显示 0 边距和填充。
      猜你喜欢
      • 2014-01-20
      • 2014-02-21
      • 1970-01-01
      • 1970-01-01
      • 2018-07-24
      • 2015-01-24
      • 2017-01-07
      • 2015-03-16
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode