随机空格HTML5

时间：2015-04-21 06:11:35

标签： html css text formatting margin

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

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

<!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正常工作，这可能是它无法正常工作的原因。我还尝试在heading3和paragraph元素之间添加注释，但这显然不起作用。

    我正在使用Cloud9（c9.io）代码编辑器。在CSS中，我尝试使用margin-top的负值，但也没有一致地工作。当我从谷歌浏览器打开代码检查器时，它显示我的heading3和段落元素，中间没有任何内容，没有边距，填充或边框阻止heading3和段落更紧密。我真的迷路了。

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

    编辑：我已经将margin和padding设置为0.它没有用。 Inspect元素显示我的p和h3元素中有0个边距或填充。

    3 个答案:

    答案 0 :(得分：1)

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

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

    Fiddle link

    答案 1 :(得分：0)

    我发现在开始普通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”。

    • 答案 2 :(得分：0)

    巴迪，简单。所有浏览器都有自己对“边距”，“填充”，“边框”等默认细节的解释。因此，在开始任何新项目之前，您必须将以下代码添加到您的CSS中：

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

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

    相关问题
    最新问题