html - 如何让 div 在 HTML 和 CSS 中正常工作？
问题描述
我正在向我们的网站添加部分，除了其中一个之外，所有部分都按照我想要的方式工作：即部分之间没有边距。
我无法让这一页的部分在部分之间没有边距；他们下面有额外的空间。我用细齿梳检查了代码，但找不到错误。
我首先包含一个正常工作的示例页面的代码：
<html>
<head>
<meta charset="windows-1252">
<style media="screen" type="text/css">
/*<![CDATA[*/
body {
background: fuchsia;
color: purple;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0px;
clear: left;
}
option {
background: yellow;
color: purple;
}
table {
background: yellow;
}
caption {
font-weight: bold;
}
.copyright {
color: white;
font-size: 12px;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
padding-left: 280px
}
.cta {
background: Red;
color: white;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
.text {
background: MediumSpringGreen;
color: black;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
}
/*]]>*/
</style>
<link href="favicon.ico" rel="shortcut icon" />
<title>Vegan and Raw Vegan Books for Sale</title>
<meta content="Choose poetry ebooks praising the benefits of veganism and vegetarian cuisine" name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<div class="logo"><img alt="black female entrepreneurs 2018 on soapbox" height="345" src="IMG_8292.JPG" width="240" /></div>
<div class="text">
<h1>Choose Vegan Books</h1>Veganism kicks butt! Veganism kicks arse! Veganism kicks ass! These vegan poetry books call you to find fulfillment through veganism.
<h2>Hurray for Raw Foods and Raw Veganism: 40 Poems</h2>When you combine two great things, veganism and the raw food diet, you create something even greater yet: raw veganism. Raw veganism can take the world by storm. Other books focus on explaining raw
veganism and providing raw vegan recipes; this book focuses on celebrating raw veganism through poetry.
<p></p>42 pages; 40 poems.
<p></p>
</div>
<div class="cta"><img alt="vegan lifestyle book" height="230" src="Raw Veganism 1600 x 2300.jpg" width="160" />
<p></p><a href="https://gum.co/mbpTD">Choose Hurray for Raw Foods and Raw Veganism: 40 Poems</a>
</div>
<div class="text">
<h2>Let's Use Free Speech to Praise the Vegan Way</h2>Some consider veganism tough; I consider it doable; Some consider veganism unsound; I consider it justified; Some consider veganism foolish; I consider it wise; And you will feel the same; After reading
this poetry chapbook.
<p></p>Do you want to go vegan yet need some encouragement? Have you already gone vegan and want to celebrate veganism? In either case, this book will give you what you need.
<p></p>26 pages; 25 poems.
<p></p>
</a>
</div>
<div class="cta"> <img alt="veganism pros" height="230" src="Vegan 1600 x 2300.jpg" width="160" />
<p></p><a href="https://gum.co/chCeB">Choose Let's Use Free Speech to Praise the Vegan Way</a></div>
<div class="copyright">
<p></p>©2017-2021 Free Press Media Press Inc.
</div>
</body>
</html>这是不起作用的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style media="screen" type="text/css">
/*<![CDATA[*/
body {
background: fuchsia;
color: purple;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0px;
clear: left;
}
option {
background: yellow;
color: purple;
}
table {
background: yellow;
}
caption {
font-weight: bold;
}
.copyright {
color: white;
font-size: 12px;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
padding-left: 280px
}
.cta {
background: Red;
color: white;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
.text {
background: MediumSpringGreen;
color: black;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
}
/*]]>*/
</style>
<link href="favicon.ico" rel="shortcut icon">
<title>Best Labor Unions Books for Sale</title>
<meta content="Chose the best labor unions books promoting unions in texas and discussing labor unions pros and cons" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<div class="logo"><img alt="black woman activist" height="345" src="IMG_8292.JPG" width="240" /></div>
<div class="text">
<h1>Choose Union Books</h1>Andrew Bushard's efforts to unionize Accenture has been inspiring people. Andrew Bushard filed a National Labor Relations Board (NLRB) unfair labor charge against his employer Accenture for violating his unionization rights.
The NLRB agent "found merit" in his charge, so the NLRB prosecuted Accenture. Accenture capitulated and agreed to a settlement, so Andrew won the case. Victory! Andrew Bushard's unionizing success can empower you when you unionize and pursue other
leadership endeavors.
<h2>Let's Use Free Speech to Unionize Accenture and Other Companies</h2>Accenture doesn't pay its call center workers enough, so unions should intervene. This work discusses the problems of Accenture type leadership as well as advocates for the political
and philosophical need for the unionization solution.
<p></p>
36 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="black female revolutionaries on cover" height="230" src="labor%20unions%20today.jpg" width="160" />
<p></p> <a href="https://gum.co/gKukG">Choose Let's Use Free Speech to Unionize Accenture and Other Companies</a></div>
<div class="text">
<h2>Let's Use Free Speech to Promote Unions at Accenture and Other Places</h2>Since you enjoyed my book <i>Let's Use Free Speech to Unionize Accenture and Other Companies</i>, you will enjoy this one as well. Since writing the first book, lots of things
have happened and I have developed new insights, so read this book to learn more.
<p></p>
28 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="radical union book" height="230" src="unions%20labor.jpg" width="160" />
<p></p><a href="https://gum.co/KrWFn">Choose Let's Use Free Speech to Promote Unions at Accenture and Other Places</a></div>
<div class="text">
<h2>Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</h2>Despite opposition and obstacles, Andrew Bushard has continued to answer his calling to unionize the company of Accenture. Since the publication of his books <em>Let's Use Free Speech to Unionize Accenture and Other Companies</em> and <em>Let's Use Free Speech to Promote Unions at Accenture and Other Places</em>, he has continued resisting management and he has experienced a paradigm shift realizing all unions are not the same. This work describes his encounters with bad and
harmful unions, repressive and arrogant management, apathetic and hostile coworkers, and helpful and encouraging Syndicalists.
<p></p>
32 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="Unions in America" height="230" src="unfair%20labor%20practices%20examples.jpg" width="160" />
<p></p><a href="https://gum.co/VNsIOZ">Choose Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</a></div>
<div class="copyright">
<p></p>©2017-2021 Free Press Media Press Inc.
</div>
</body>
</html>谁能告诉我我在这两个代码中做了什么不同以及如何纠正第二个代码？
解决方案
你所经历的被称为“崩溃的边距”。示例：如果h2在 div 内有一个作为第一个子元素，并且 div 没有边距，则顶部的上边距h2将在顶部“超出 div” - h1、h2 等标签实际上在所有标签中都有默认边距浏览器（这是浏览器设置）。为了防止这种情况，您可以将相应元素的所有边距定义为零，就像我在下面所做的那样
h1, h2 {
margin: 0;
}
但是当然这也会影响所有其他的 h1 和 h2 标签，所以你可能想要使用一个类，或者使用一个选择器，比如div > h1, div > h2 { margin: 0; }
body {
background: fuchsia;
color: purple;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0px;
clear: left;
}
option {
background: yellow;
color: purple;
}
table {
background: yellow;
}
caption {
font-weight: bold;
}
.copyright {
color: white;
font-size: 12px;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
padding-left: 280px
}
.cta {
background: Red;
color: white;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
.text {
background: MediumSpringGreen;
color: black;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
h1, h2 {
margin: 0;
}<div class="logo"><img alt="black woman activist" height="345" src="IMG_8292.JPG" width="240" /></div>
<div class="text">
<h1>Choose Union Books</h1>Andrew Bushard's efforts to unionize Accenture has been inspiring people. Andrew Bushard filed a National Labor Relations Board (NLRB) unfair labor charge against his employer Accenture for violating his unionization rights. The
NLRB agent "found merit" in his charge, so the NLRB prosecuted Accenture. Accenture capitulated and agreed to a settlement, so Andrew won the case. Victory! Andrew Bushard's unionizing success can empower you when you unionize and pursue other leadership
endeavors.
<h2>Let's Use Free Speech to Unionize Accenture and Other Companies</h2>Accenture doesn't pay its call center workers enough, so unions should intervene. This work discusses the problems of Accenture type leadership as well as advocates for the political
and philosophical need for the unionization solution.
<p></p>
36 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="black female revolutionaries on cover" height="230" src="labor%20unions%20today.jpg" width="160" />
<p></p> <a href="https://gum.co/gKukG">Choose Let's Use Free Speech to Unionize Accenture and Other Companies</a></div>
<div class="text">
<h2>Let's Use Free Speech to Promote Unions at Accenture and Other Places</h2>Since you enjoyed my book <i>Let's Use Free Speech to Unionize Accenture and Other Companies</i>, you will enjoy this one as well. Since writing the first book, lots of things
have happened and I have developed new insights, so read this book to learn more.
<p></p>
28 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="radical union book" height="230" src="unions%20labor.jpg" width="160" />
<p></p><a href="https://gum.co/KrWFn">Choose Let's Use Free Speech to Promote Unions at Accenture and Other Places</a></div>
<div class="text">
<h2>Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</h2>Despite opposition and obstacles, Andrew Bushard has continued to answer his calling to unionize the company of Accenture. Since the publication of his books <em>Let's Use Free Speech to Unionize Accenture and Other Companies</em> and <em>Let's Use Free Speech to Promote Unions at Accenture and Other Places</em>, he has continued resisting management and he has experienced a paradigm shift realizing all unions are not the same. This work describes his encounters with bad and
harmful unions, repressive and arrogant management, apathetic and hostile coworkers, and helpful and encouraging Syndicalists.
<p></p>
32 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="Unions in America" height="230" src="unfair%20labor%20practices%20examples.jpg" width="160" />
<p></p><a href="https://gum.co/VNsIOZ">Choose Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</a></div>
<div class="copyright">
<p></p>©2017-2021 Free Press Media Press Inc.
</div>推荐阅读
- typescript - 如何根据在 monorepo 上的使用位置将别名指向不同的位置
- sql-server - 当结果太大时，使用 knex 的 SQL Server 查询会使 Nuxt 应用程序崩溃
- cakephp - 无法找到单元测试获取错误类
- python - 如何连接具有不同列名和长度的多个数据框
- rendering - UE4/5 是否利用 GPU 进行视频渲染？
- reactjs - 来自不同文件的 React + scss 样式重叠
- javascript - 如何使用 TypeScript 对象中的字段作为另一个字段的值？
- python - 如何正确连接我的代码并提高效率？
- python - 将成员从一个电报超级组转移到另一个没有好的结果
- angular - 在调试使用 ngrx 的 Angular 应用程序时，我如何才能找到调度给定操作的代码行？