gpt4 book ai didi

html - 需要删除 Body 中元素周围的填充

转载 作者:太空宇宙 更新时间:2023-11-04 09:39:53 25 4
gpt4 key购买 nike

我是 HTML5 的新手。几年前我曾经编写过 HTML,但我不熟悉新的做事方式。我基本上是从头开始。我已经开始为我想要建立的网站设计和编写代码。在我走得更远之前,我想让我所做的看起来正确。每张图片周围都有填充,我不确定如何删除。我需要所有图像相互对比。我试过将 padding: 0 和 margin: 0 放在代码中的所有元素上,但没有任何效果。我做错了什么?

Images with padding I want removed

这是我正在使用的代码片段:

    <style>
html, body { padding: 0; margin: 0 }
</style>
</head>
<body>

<header>
<img src="images/logo.gif" />
</header>

<nav>
<table>
<tr>
<td>
<img src="images/purpleBarLeftOfNav.gif" width="173" height="77" alt="" title="" />
<img src="images/navHomeTopSel.gif" alt="Home" title="" />
<img src="images/navAboutTop.gif" alt="About" title="" />
<img src="images/navServicesTop.gif" alt="Services" title="" />
<img src="images/navPortfolioTop.gif" alt="Portfolio" title="" />
<img src="images/navContactTop.gif" alt="Contact" title="" />
<img src="images/purpleBarPgTitleHome.gif" alt="Home" title="" />
</td>
</tr>

<tr>
<td>
<img src="images/spacerWhite.gif" width="114" height="146" alt="spacer" title="" />
<img src="images/phoneEmail.gif" width="59" height="146" alt="Phone and Email" title="" />
<img src="images/navHomeBtmSel.gif" width="32" height="146" alt="Home" title="" />
<img src="images/navAboutBtm.gif" width="32" height="146" alt="About" title="" />
<img src="images/navServicesBtm.gif" width="32" height="146" alt="Services" title="" />
</td>
</tr>
</table>
</body>

最佳答案

今天,2016 年,我们使用 flexbox 进行布局,而不是 table(除非您需要让它在旧浏览器上工作)

html,
body {
margin: 0
}
div {
display: flex;
}
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

如果你真的不能使用flexbox,就让它们 float

html,
body {
margin: 0
}
div:after {
content: '';
clear: both;
display: block;
}
div img {
float: left;
}
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

关于html - 需要删除 Body 中元素周围的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40024782/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com