Question

你好，我在这里有一个问题，我正在学习HTML，一切都很顺利，但我有一个让我非常生气的问题。

他们说div标签是块级元素因此，任何IN BETWEEN div标签都应以新的换行符开头，并以一个换行结束。

但是我正在测试它，这不是真的！这令我沮丧！

继承原始代码

<div>this is plain text in a div tag.</div>
<div>this is plain text in a div tag.</div>
<div>this is plain text in a div tag.</div>
<p>This is paragraph that is NOT in a set of div tags.</p>
<div>this is plain text in a div tag.</div>
<div>this is plain text in a div tag.</div>

这是它的显示方式！ WTF！

this is plain text in a div tag
this is plain text in a div tag
this is plain text in a div tag

This is paragraph that is NOT in a set of div tags

this is plain text in a div tag
this is plain text in a div tag
this is plain text in a div tag

只有该段开头并以新的换行符结束，因为应该这样做它是一个块级元素

但是“这是一组div标签中的纯文本”行不会以新换行符开头或结尾！它们是一组div标签！这也应该是块现在我不理解！

和im学习html有一个div标签的布局示例的来源也让我感到困惑此布局中没有任何部分以新的换行符开始或结束！继承人也感冒了

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

只有在使用h1标签和他时才会出现换行符使用margin-bottom：0取出底线那么为什么这个右边的其他部分在顶部并且彼此相邻，就好像它们是内联元素一样当他们每个都在他们自己的div标签...这是令我沮丧的！我想把头发拉出来！

Answer 1

这不是HTML问题。你看到的是一个CSS问题。每个浏览器都有一个默认的样式元素方式。碰巧的是，段落会自动填充一些填充/边距。

我拿了你的代码，并应用了这个简单的css，它立即解决了视觉问题：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Fix</title>
<style type="text/css">
    div, p {
        margin: 0px;
        padding: 0px;
    }
</style>
</head>

<body>
    <div>this is plain text in a div tag.</div>
    <div>this is plain text in a div tag.</div>
    <div>this is plain text in a div tag.</div>
    <p>This is paragraph that is NOT in a set of div tags.</p>
    <div>this is plain text in a div tag.</div>
    <div>this is plain text in a div tag.</div>
</body>
</html>

Answer 2

你需要明白，这些html标签中的一些特别是文本容器，即标题，段落等，都带有零以外的默认边距。如果你对这些间距不好，你可以设置它们的样式，否则它们就会采用它们的默认值。尝试为段落标记添加边距以获得所需的效果

DIV标记充当INLINE而不是BLOCK

2 个答案: