Question

我已开始将网站编码为副项目。我的布局有问题。我希望项目之间的所有空间都不存在，但我没有找到这样做的方法。我试图从一些元素中删除边距，这似乎没有产生任何影响。这让我走到了尽头。

图片显示我的差距

蓝线表示我想摆脱的空间。

＆＃13;

   /*Header CSS*/
.container {
    position: relative;
    margin-top: 0;
  	margin-bottom: 0;
}

.header_img {
	width:100%;
	height:150px;
	margin:0;
}

.text {
	font-size:26px;
	position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:red;
}

.strapline {
	font-size:22px;
	position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:red;
}
/*Removes page margin*/
body {
    margin: 0;
}
/*Navigation Bar CSS*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #666666;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
/*Setting up page*/
.main_text {
	margin-left:15%;
	width:85%;
	position: fixed;
	height:100%;
	background-color: #b3b3b3;
	margin-top: 0;
	margin-bottom: 0;
}
/*Text formating*/
.first_line_home_page {
	margin-left:15%;
	font-size:20px;
}

.heading {
	background-color:red;
}

.article_title {
	 color:white;
	 font-size:24px;
}

.article_intro {
	font-size:18px;
}

.article_strapline {
	font-size:18px;
	font-weight:bold;
}

.white_background {
	background-color:grey;
}
/*Images formating*/
.interesting_article_img {
	height:165px;
	width:330px;
	float: left;
}

img { 
	border: 0; 	
}

＆＃13;

   <div class="container">
	<img src="https://www.freewebheaders.com/wordpress/wp-content/gallery/football/world-cup-goal-keeper-sport-website-header.jpg" class="header_img" alt="Error">
	<div class="text"> 
		<h1>The Football Informer</h1>
		<p class="strapline">The Home of Football</p>
	</div>
</div>

<ul>
	<li><a class="active" href="home.html">Home</a></li>
	<li><a href="about.html">About</a></li>
</ul> 

<div class="main_text">
	<p class="first_line_home_page">Welcome to The Football Informer. This is the place to keep up to date with the footballing world.</p>
	<div class="heading">
	<h1>Interesting Articles</h1>
	</div>
	
	<div class="white_background">
	<a href="http://thefootballfaithful.com/allardyce-reveals-cenk-tosun-struggles/" target="blank">
	<p class="article_title ">Allardyce reveals Cenk Tosun struggles.</p>
	<img src="https://i1.wp.com/thefootballfaithful.com/wp-content/uploads/2018/02/img_7476.jpg?resize=660%2C330" class="interesting_article_img" alt="Error">
	</a>
	</div>
	<p class="article_strapline">Less than a month after joining Everton for £27m, Sam Allardyce has revealed that Cenk Tosun is struggling to adapt to life in the Premier League.</p>
	<p class="article_intro">The Turkish international sat out of the Toffees’ 5-1 humbling at the hands of Arsenal on Saturday evening, with the once outcasted Oumar Niasse selected to start the game.<br>
	Speaking after the defeat, Allardyce that the 26-year-old has struggled with the ‘pace and physicality of the game.’</p>
	<br>
	<div class="white_background">
	<a href="http://www.skysports.com/football/news/11715/11237193/leeds-sack-head-coach-thomas-christiansen-after-cardiff-thrashing" target="blank">
	<p class="article_title ">Leeds sack head coach Thomas Christiansen after Cardiff thrashing</p>
	<img src="http://e0.365dm.com/17/09/16-9/20/skysports-thomas-christiansen-leeds_4110664.jpg?20170925180918" class="interesting_article_img" alt="Error">
	</a>
	</div>
	<p class="article_strapline">Leeds have sacked head coach Thomas Christiansen after a 4-1 thrashing at home to Cardiff on Saturday - their sixth Championship game without a win.</p>
	<p class="article_intro">Christiansen's side had been without a win since Boxing Day and a spate of ill-discipline had seen three different players sent-off in four games.<br>
	Leeds had been pushing for a place in the top six but slipped to 10th after the Cardiff defeat and the club announced his departure just over 24 hours later.<br>
	"Leeds United can confirm that head coach Thomas Christiansen has left the club," a statement read.
	</p>

</div>

＆＃13;

Answer 1

你能澄清你的意思吗？＆＃34;空格＆＃34;？是在线之间吗？

假设这只是行之间的边距，你可以将margin设置为0.我拿了你的代码并在这里制作了一个codepen：

https://codepen.io/anon/pen/GQjdjR

我添加了* {margin: 0;}的CSS的第一行，它删除了所有元素的边距。我不能说这是一个好的想法，但没有你想要的感觉很难说。

您还可以查看CSS重置以删除浏览器强加的CSS规则，例如：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 2

标题标记（h1到h6）和段落标记具有默认边距。你可以尝试添加，

function showMarkers() {
    for (let i in markers) {
        markers[i].setMap(map);
    }
    markerCluster.addMarkers(markers);
}

指向您的样式，以消除这些标记导致的不必要的间隙。对于标题图像，容器div的高度略高于图像标记。将 高度150px 添加到 容器div ，以消除不必要的差距或更好，如果您设置< strong> 图片代码的高度为100％ ，然后 容器div的静态高度为150px ，这将是确保图像标记的 高度始终遵循容器div的高度 。希望这有帮助！

如何删除div标签周围的空格

2 个答案: