html - 随机空白 HTML5-6ren

html - 随机空白 HTML5

转载作者：太空宇宙更新时间：2023-11-04 12:01:26

我浏览了整个内部网，试图找到解决我的问题的方法，但我还没有找到任何我尚未尝试过的解决方案。

我的网页上有一个空间，代码为 0，没有边距，没有填充，没有边框，只有两个元素，大约 300px 由...分隔。没有代码或边距会导致这种情况发生。这是我的代码:

<!DOCTYPE html>

冥想指南

主页

类(class)

博客

关于

想学习如何冥想吗？

加入类(class) 你来对地方了! 为什么打坐？快速棕色狐狸跳过缓慢的棕色乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕狐跳过缓慢的棕色乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。

敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。敏捷的棕色狐狸跳过缓慢的棕色狐狸乌龟。

* {
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 正常工作，这可能是它不工作的一个可能原因。我还尝试在 heading3 和 paragraph 元素之间放置注释，但这显然行不通。

我使用的是 Cloud9 (c9.io) 代码编辑器。在 CSS 中，我尝试将 margin-top 设置为负值，但效果也不一致。当我从 Google Chrome 打开代码检查器时，它显示我的 heading3 和段落元素，中间没有任何内容，也没有边距、填充或边框阻止 heading3 和段落靠得更近。我真的迷路了。

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

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

最佳答案

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

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

Fiddle link

关于html - 随机空白 HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29764246/

文章推荐： html - 如何使 div 扩展到页面的高度？

文章推荐： java - Android TCP 客户端。服务器仅在进程停止后接收消息

文章推荐： java - Spring应用程序JPA和JDBC

文章推荐： java - 如何在主类中使用maven测试类

javascript - 只显示一个段落......不管是否有更多，空白，空白，类......只有并且只有CSS
我正在寻找 css 属性以隐藏带或不带 css 类的段落，如果它包含空格 ( ) 或空白，但我想至少保留一个带或不带的段落，如果有更多的话。隐藏段落，如果它是空白的或包含 white-space(
ruby 空白
在 ruby 中对空白有不同的敏感度/设置吗？我有一个 RoR 项目，其中一个事件记录调用有很多组件: max_stuff = FooSummary.select("max(stuff)
数字后和文本前的 LaTeX 空白
如何在脚注中的数字后留空？一般来说，对于所有脚注! 例子: 好 : 1 Hello World 坏:1Hello World 最佳答案正确答案是不要重新定义\thefootnote ，因为这会在脚
javascript - 数组未设置回 [] (空白)
我有这段代码，每次第一个 for 循环再次开始时，我希望它将数组重置为空白，因为它正在使用新用户，但我得到的输出包含一个数组中的所有值。 var items = []; for (var i
php - Cakephp生成xml错误-空白
我试图在CakePHP中生成一个动态xml文档，以输出到浏览器。这是我的 Controller 代码: Configure::write ('debug', 0); $this->layout =
Ansible strip 空白
当我尝试在 nxos 设备上运行某些命令时，输出末尾有一个空格。我必须将输出与现有变量列表进行比较。末尾的空格导致比较错误。如何在字符串列表中使用 .strip() 函数？ - name: Curre
elasticsearch搜索查询返回 "hits"空白
我对 Elasticsearch 相当陌生，我一直在尝试对我的数据进行搜索，并且总是让点击部分为空。即使在数据上传和索引之后也会发生这种情况。我的映射如下: { "mappings":{
firefox - Firefox插件更改关于:空白
我想将about:blank页面更改为firefox插件首页页面的url。如何更改默认的新标签页网址或可以为新标签页提供默认网址？我正在使用Firefox附加SDK。最佳答案您可以结合使用Ta
R - 根据同一行不同列的值填充缺失值(空白)
我正在使用 R 并具有以下数据框示例，其中所有变量都是因子: first second third social birth control high
jquery 空白/灰色显示对话框的页面
如何清空显示对话框的页面。下面是我的代码HTML: .ui-dialog, .ui-dialog-content { border:1px solid #cde68c; border-botto
c - 尝试输出此函数时我什么也没得到\空白
更新“他的问题是要求我只运行一次 str ，他们已经告诉我该函数只需要一个参数)” 我试图返回第一个不重复的字符，例如:“blazqnqbla”->第一个不重复的字符是“z”，因此函数需要返回z。现在
php - 无法检查登录错误(空白)
我的登录验证有问题。问题是当我尝试使用管理员登录时，页面停止在 checklogin.php 上并且不会告诉它是否成功。这是我的代码。索引.html Aplik
MYSQL 查询以检查值是否为空/空白
我的查询是这样的 SELECT Distinct tm.teamid,tm.Team_Name,CONCAT_WS(' ',tu.FirstName+' '+tu.LastName) as Leade
javascript - 查询字符串错误。空白
我正在创建指向页面的超链接 url 由用户输入决定，因此由查询字符串决定 ; 问题是变量状态由两个或多个单词组成。因此，当我尝试单击证明表单中输入的超链接时，仅获取状态变量的第一个单词。浏览器将另一个
jquery scrolltofixed 空白
该问题在每个浏览器中的表现都不同，例如在 Firefox 中大约一个空格如果您再次滚动到顶部，则会出现具有相同高度的滚动框。在 chrome 中，滚动时框会变得狭窄等等...... 使用的调用是:
菜单之间的 CSS 空白
我对菜单栏文字之间的 CSS 空白有疑问。我尝试了很多方法，但仍然无法解决。有人可以帮我吗？菜单问题图片如下: http://imageshack.us/photo/my-images/201/44
html - 空白/有文本时插入符号在文本区域中的不同位置
我对有疑问.其中的插入符根据是否为空具有不同的垂直位置: 我的代码: textarea { padding: 0 5px; border: none; outline: n
html - 输入代码中的返回行导致输出中元素之间的间隙/空白？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Ignore whitespace in HTML 我想在网页上将图片并排放置。这是我的 HTML:
html - 检查元素不工作/空白
每当我尝试检查元素时，什么都没有出现。我在使用 Chrome。我明白了 Elements | Network | Sources | Timeline | Profiles | Resources |
css - 是什么导致了这个双滚动条/空白？
我在使用 Chrome、Firefox 和 IE 时遇到了一个奇怪的问题。我正在为我的投资组合网站/博客构建一个 WordPress 主题，一切都很好，直到今天，当我在 chrome 中查看该网站时，

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 随机空白 HTML5

想学习如何冥想吗？