html - 如何删除 div 标签周围的空间

Question

我已经开始编写网站代码作为副元素。我对它的布局有疑问。我希望元素之间的所有空格都不存在，但我没有找到这样做的方法。我试图从某些元素中删除边距，但这似乎没有任何影响。这使我陷入了死胡同。

图像显示了我所说的差距

蓝线显示了我想要摆脱的空间。

   /*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; 	
}

   <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>

Answer 1

标题标签(h1 到 h6)和段落标签有默认边距。你可以尝试添加，

   p, h1 {
     margin: 0;
   }

到您的样式以删除由这些标签引起的不需要的间隙。至于标题图像，与图像标签相比，容器 div 的高度略大。添加 150px 的高度 也到 container div 以移除不需要的间隙，或者如果您设置 < strong>将图像标签的高度设置为 100% 然后 container div 将具有 150px 的静态高度，这将确保图像标记的高度始终遵循容器 div 的高度。希望这对您有所帮助!