我无法摆脱各部分之间的空间(鲜艳的色彩使差异可见,我希望中间部分为灰色)。
* {
width: 100%;
margin: auto;
box-sizing: border-box;
align-items: center;
text-align: center;
text-decoration: none;
font-family: sans-serif;
background-color: silver;
}
body {
padding-left: 25%;
padding-right: 25%;
background: linear-gradient(to right, red 25%, silver 50%, red 25%);
}
<body>
<a href="#" class="navbar__logo"><img src="images/Capture.JPG" alt="Logo of Company" class="logo"></a>
<h2>For a Faster & Tastier World</h2>
<p id="top__chat">An Extraordinary Invention To Make You Happier</p>
<div class="navbar--menu">
<a href="#" class="navbar__link">Home</a>
<a href="#" class="navbar__link">Products</a>
<a href="#" class="navbar__link">About</a>
</div>
<section class="hero">
<div class="hero__image">
<img src="/images/super_mag_hero.jpg" alt="Super Mag" id="hero__image">
</div>
<h4>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit sunt, porro,
accusamus hic ullam..</h4>
</section>
<br>
<section class="story">
<div id="mid__chat1">
<img src="images/sell_mag.jpeg" alt="Super Mag" class="mid_img1">
</div>
<p class="mid_chat1">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quae aut, est perferendis veniam unde modi </p>
</div>
<h4>Lorem i perferendis tempora quo sint placeat fugiat!</h4>
<br><br>
<div id="mid__chat2">
<img src="images/sell_mag.jpeg" alt="Super Mag" class="mid_img2">
</div>
<p class="mid_chat2">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quae aut, est perferendis .</p>
</div>
</section>
<section id="footer">
<div class="footer__links">
<a href="#" class="navbar__link">PLACE</a>
<a href="#" class="navbar__link">MAP</a>
<a href="#" class="navbar__link">PHONE NUMBER</a>
<a href="#" class="navbar__link">E-MAIL</a>
</div>
</section>
</body>
* {
width: 100%;
margin: auto;
box-sizing: border-box;
align-items: center;
text-align: center;
text-decoration: none;
font-family: sans-serif;
background-color: silver;
}
body {
padding-left: 25%;
padding-right: 25%;
background: linear-gradient(to right, red 25%, silver 50%, red 25%);
}
<body>
<a href="#" class="navbar__logo"><img src="images/Capture.JPG" alt="Logo of Company" class="logo"></a>
<h2>For a Faster & Tastier World</h2>
<p id="top__chat">An Extraordinary Invention To Make You Happier</p>
<div class="navbar--menu">
<a href="#" class="navbar__link">Home</a>
<a href="#" class="navbar__link">Products</a>
<a href="#" class="navbar__link">About</a>
</div>
<section class="hero">
<div class="hero__image">
<img src="/images/super_mag_hero.jpg" alt="Super Mag" id="hero__image">
</div>
<h4>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit sunt, porro,
accusamus hic ullam..</h4>
</section>
<section class="story">
<div id="mid__chat1">
<img src="images/sell_mag.jpeg" alt="Super Mag" class="mid_img1">
</div>
<p class="mid_chat1">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quae aut, est perferendis veniam unde modi </p>
</div>
<h4>Lorem i perferendis tempora quo sint placeat fugiat!</h4>
<br><br>
<div id="mid__chat2">
<img src="images/sell_mag.jpeg" alt="Super Mag" class="mid_img2">
</div>
<p class="mid_chat2">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quae aut, est perferendis .</p>
</div>
</section>
<section id="footer">
<div class="footer__links">
<a href="#" class="navbar__link">PLACE</a>
<a href="#" class="navbar__link">MAP</a>
<a href="#" class="navbar__link">PHONE NUMBER</a>
<a href="#" class="navbar__link">E-MAIL</a>
</div>
</section>
</body>
<br>