Html CSS float属性创建虚拟边距_Html_Css

Html CSS float属性创建虚拟边距

html css

Html CSS float属性创建虚拟边距,html,css,Html,Css,所以我很喜欢建立我的小网站，我有一个包含内容的div，在我的内容div中紧密嵌套着两个段落和一个标题。我决定在我的内容分区内向右浮动一个图像，希望段落环绕它，这是意料之中的事情，但它在我的标题横幅和我的内容分区之间创建了一个幻影边距，我搜索，搜索，搜索，搜索，搜索，搜索，直到我无法再忍受它！然后决定把我的SOS装在瓶子里，朝stackoverflow发射，请帮帮我，否则我可能会在24-48小时内进入自杀监视以下是html和代码，请不要笑，我是一个noob，学习css和html才三周左右： &l

所以我很喜欢建立我的小网站，我有一个包含内容的div，在我的内容div中紧密嵌套着两个段落和一个标题。我决定在我的内容分区内向右浮动一个图像，希望段落环绕它，这是意料之中的事情，但它在我的标题横幅和我的内容分区之间创建了一个幻影边距，我搜索，搜索，搜索，搜索，搜索，搜索，直到我无法再忍受它！然后决定把我的SOS装在瓶子里，朝stackoverflow发射，请帮帮我，否则我可能会在24-48小时内进入自杀监视

以下是html和代码，请不要笑，我是一个noob，学习css和html才三周左右：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)"/>
<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (max-width: 768px)"/>
<link href="media.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 200px) and (max-width: 479px)"/>
<title>MSK Chess</title>
</head>

<body>
    <div id="banner">
        <h1>MSK Chess</h1>
    </div>
<div id="container">
<div id="container2">
    <div id="navigation">
        <ul>
            <li><a href="#">Nav item 1</a></li>
            <li><a href="#">Nav item 2</a></li>
            <li><a href="#">Nav item 3</a></li>
        </ul>
    </div>
    <div id="more"> <!--right column-->
        <h3>Chess goodies</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. </p>
        <a href="#"><img src="chessjam.jpg"></a>
    </div>
    <div id="content"><!--left column-->
        <div class="right"><img src="image.gif" alt="" width="100" height="100"><br>Chess blah</div><p> 
        <h2>Chess is Awesome</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>

    </div>
    <div id="cleardiv"></div>
</div>
</div>
<div id="footer">
<ul>
    <li><a href="#">Footer item 1</a></li>
    <li><a href="#">Footer item 2</a></li>
    <li><a href="#">Footer item 3</a></li>
    <li><a href="#">Copyright &copy; mirsultankhan.com</a></li>
    <li><a href="#"><img src="vcss.gif"></a></li>
</ul>
</div>

</body>

非常感谢您抽出时间-向Robbie表示亲切的问候在您的

国际象棋棒极了之前，您有一个空的标记。该段落有一个默认的顶部边距，该边距折叠为其父元素
元素的零边距，有效地将该边距应用于
本身，使其远离横幅
我假设空段落是为了从
顶部偏移
。出于同样的目的，您可以使用
标记替换空段落，或者您可以为
添加填充：1px
样式，以便将其边距与
边距分开，避免其折叠。
html中的下一行（第31行）末尾有一个不必要的标记：
<div class="right"><img src="image.gif" alt="" width="100" height="100"><br>Chess blah</div><p>


象棋之类的东西

卸下它，你就会没事。太棒了！谢谢你的帮助-一个空段落标签，哎哟！真可耻！昨晚我在这页的每一页边距上搜索了好几个小时，你真是太棒了-非常感谢-问候Robbiet谢谢你亲爱的先生，真的谢谢你！它移除了它，一切都很好！非常感谢你抽出时间来问候robbie:D
<div class="right"><img src="image.gif" alt="" width="100" height="100"><br>Chess blah</div><p>