如何删除不同部分之间的空间?

问题描述 投票:0回答:1

我无法摆脱各部分之间的空间(鲜艳的色彩使差异可见,我希望中间部分为灰色)。

Image of the issue

我认为这与

标签有关,但很难确定解决方案。

你可以协助吗?

我使用的是我使用的HTML和CSS中的一些:

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

html css background-color
1个回答
0
投票

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

元素

	

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.