CSS奇怪的列段空格

我创建了3列3格网格。第一段比另外两段有更多的空间。谁能帮忙？如果有帮助，我附上了一张图片。我仍然是编码方面的初学者，所以你会注意到我所做的一些奇怪的事情是不切实际的。CSS奇怪的列段空格

enter image description here

<!doctype html> 

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
    <title>Qualenist</title> 
    <link rel="stylesheet" href="stylesheet.css"> 
</head> 
<body> 
    <div class="mainBanner"> 
     <div class="menuBox"></div> 
     <img src="menuBars.png" style="position: absolute; margin-top: 35px; margin-left: 260px;"/> 
     <h6><span>already a member?</span> Sign in</h6> 
     <h1>Qualenist</h1> 
     <h2>Lorem ipsum dolor sit amet & consectetur adipisicing elit</h2> 
     <div class="divider"></div> 
     <div class="signUpBox"></div> 
     <h3>Sign Up</h3> 
     <h4>learn more</h4> 
     <img src="downArrow.png" style="display: block; margin-left: auto; margin-right: auto; margin-top: -10px"/> 
     <div class="whatWeDo"> 
      <h5>What we do</h5> 
      <img src="doSearch.png" style="position: absolute; margin-left: 292px; margin-top: 5px;"/> 
      <img src="doGraph.png" style="position: absolute; margin-left: 572px; margin-top: 5px;"/> 
      <img src="doPay.png" style="position: absolute; margin-left: 851px; margin-top: 5px;"/> 
      <div id="descriptions"> 
       <p>Lorem ipsum dolor sit amet, consectetur <br> 
       adipisicing elit, sed do eiusmod tempor <br> 
       incididunt ut labore et dolore magna.</p> 

       <p>Lorem ipsum dolor sit amet, consectetur <br> 
       adipisicing elit, sed do eiusmod tempor <br> 
       incididunt ut labore et dolore magna.</p> 

       <p>Lorem ipsum dolor sit amet, consectetur <br> 
       adipisicing elit, sed do eiusmod tempor <br> 
       incididunt ut labore et dolore magna.</p> 
      </div> 
    </div> 
    <footer class="main-footer"> 
    </footer> 
</body> 
</html> 

.mainBanner { 
    background-image: url(/Users/omaramin/Documents/Competition/project/mainBanner.png); 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-family: Bariol; 
    color: #ffffff; 
    border-color: #ffffff; 
} 

.menuBox { 
    width: 35px; 
    height: 35px; 
    border-style: solid; 
    margin-top: 25px; 
    margin-left: 252px; 
    position: absolute; 
    border-width: 1px; 
    border-radius: 2px; 

} 

h6 { 
    padding-left: 825px; 
    letter-spacing: 1px; 
    font-size: 12px; 
} 

h6 span { 
    color: #b3b4b4; 
} 

h1 { 
    text-align: center; 
    padding-top: 90px; 
    font-size: 36px; 
    letter-spacing: 1.5px; 
    font-weight: lighter; 
} 

h2 { 
    text-align: center; 
    margin-top: -15px; 
    letter-spacing: 1px; 
    font-size: 13px; 
} 

.divider { 
    border: 0; 
    height: 1px; 
    width: 45px; 
    margin: auto; 
    margin-top: 21px; 
    background: #ffffff; 
} 

.signUpBox { 
    width: 150px; 
    height: 47px; 
    border-style: solid; 
    border-width: 1px; 
    margin: auto; 
    margin-top: 25px; 
    border-radius: 2px; 
} 

h3 { 
    text-align: center; 
    margin-top: -35px; 
    letter-spacing: 1px; 
    font-size: 17px; 
} 

h4 { 
    text-align: center; 
    margin-top: 115px; 
    letter-spacing: 1px; 
    font-size: 12px; 
} 

.whatWeDo { 
    margin-top: -20px; 
    color: #5c5d5d; 
    font-family: Bariol; 
} 

h5 { 
    text-align: center; 
    margin-top: 100px; 
    letter-spacing: 1px; 
    font-size: 25px; 
} 

#descriptions { 
    -moz-column-count: 3; 
    -moz-column-gap: 0px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 0px; 
    font-size: 13px; 
    letter-spacing: 1px; 
    text-align: center; 
    margin-left: 200px; 
    margin-right: 200px; 
    margin-top: 170px; 
    line-height: 20px; 
}

来源

2014-01-21 user2605157

是存在的，任何机会，在底部的图像中一些额外的空白，造成该段下降一点点？ –

没有！问题发生之前，我甚至把图像。 – user2605157

你介意链接到实际网站（如果可能）？这样，用户可以使用他们的网络浏览器的开发工具来玩这个网站，并试图找到解决方案 –

看起来像段落利润。地址：

p { 
    margin:0; 
}

jsFiddle example

来源

2014-01-21 02:54:06 j08691

仍然有一个奇怪的空白空间。谢谢你的评论！ – user2605157

不是在小提琴中它没有。如果它仍然在你的代码中，那么你应该发布你的代码的其余部分。 – j08691

你问了......大声笑。我刚刚编辑它。我还是新手，所以我的设置有点怪异。 – user2605157

#descriptions p { 
     -webkit-margin-before: 0; 
     margin: 0; 
    }

http://jsfiddle.net/helmutgranda/84jky/3/

来源

2014-01-21 03:11:10

这样做！谢谢。为什么这个工作？ – user2605157

[分享]（http://stackoverflow.com/questions/5721966/webkit-margin-adds-unwanted-margin-on-texts） –

只要看看mozilla的客户端，因为他们不使用Webkit –

你会想要将它添加到您的CSS：

description p { 
    -webkit-margin-before: 0; 
    -moz-margin-before: 0; 
}

的moz-margin-before是必要的一些Firefox浏览器。否则，他们也会看到奇怪的空白。

来源

2014-01-21 03:15:35

要和这里@ j08691同意...

http://jsfiddle.net/SinisterSystems/v4n7G/1/

p { 
    margin:0; 
}

来源

2014-01-21 03:16:04

找不到它在规范中叫出来，但是这似乎是下降到CSS之间的相互作用多元醇和利润率。正如其他人所述，将余量设置为零会导致症状消失。

#descriptions > p { margin: 0; }

但是如果是我，我会不会用CSS MULTICOL可言，因为文本浏览器找齐所有的cols的高度，而在这里，你大概想每个描述留在的cols之间流动的自己的盒子。

而且CSS3列有差IE支持：http://caniuse.com/multicolumn

我会用表CSS属性，内联块，柔性盒，甚至尝试使用列在此之前漂浮。

#descriptions { display: table; } 
#descriptions > p { display: table-cell; }

使用表标记非表格数据通常是一个坏主意，但使用CSS的表格显示属性是完全没问题。

来源

2014-01-21 03:49:07 greim

其他答案很好，工作很好，但我认为你应该改变你的标记。而不是依靠CSS列来布局文本，然后绝对将图像定位在列的上方，只需为文本和图像制作三个容器<div>即可。给容器一个百分比宽度，并使用float:left或使用flexbox来并排获取列。

如果图像的高度相同，则可以确保文字对齐。

jsFiddle Example

这种方法的另一个好处是，现在你的.column类是重复使用，你不需要使用内联或特殊风格的定位。

来源

2014-01-21 03:52:34 Andrew

真棒安德鲁！我总是乐于听到如何更有效地编写代码，而不仅仅是解决问题。非常感谢！ – user2605157

不客气。保持！ – Andrew

在我的情况下，我将一段文本放入了一段文本中，所以我想在每段之后保留一段空格。这里的解决方案是从段落标记中删除边距，然后使用填充。

标记：

<div class="columns"> 
    <p>Lorem ipsum...</p> 
    <p>Lorem ipsum...</p> 
    <p>Lorem ipsum...</p> 
    <p>Lorem ipsum...</p> 
</div>

CSS：

.columns { 
    column-count: 2; 
    column-gap: 12px; 
} 
.columns p { 
    /* don't break paragraphs */ 
    break-inside: avoid; 
    /* Use padding instead of margin to avoid weird space at top of the second column.*/ 
    margin: 0; 
    padding-bottom: 14px; 
}

来源

2016-11-08 10:20:50 Brighty

CSS奇怪的列段空格

回答

相关问题