CSS Margin-bottom无效

时间:2013-08-22 04:07:53

标签: css html css-float

margin-bottom: 30px;  没有在.box课上工作。我试图在盒子下面添加一些额外的空间,但它不起作用。 我怎样才能解决这个问题?这是我的HTML。还有什么我应该在代码中改变吗?使它变得更好。

这是我的HTML。 。 。

<!DOCTYPE HTML>
<html>

    <head>
        <link rel="stylesheet" href="style.css" type="text/css" <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <title>web</title>

    <body>
        <div id="container">
            <div id="header"></div>
            <div id="nav" class="navi"> <a class="navi" href="#"> Link </a>
                <a class="navi" href="#"> Link </a>
                <a class="navi" href="#"> Link </a>
                <a class="navi" href="#"> Link </a>
                <a class="navi" href="#"> Link </a>
                <a class="navi" href="#"> Link </a>
            </div>
            <div id="content">
                <div class="box">
                     <h1>Lorem ipsum</h1>

                     <h2>Sub heading</h2>
                    <p>dolor sit amet, epicurei neglegentur sit an, libris numquam ius ei. Appareat volutpat imperdiet no vim, ut suas aliquid sanctus quo. At duo quot essent suscipit. Vis an atomorum accusamus. Est at nemore ponderum. No nec voluptua conceptam, detraxit splendide disputando nam ea. Ne eum vocibus inimicus democritum, erant praesent eam in, agam ludus verterem an pro. Erant vidisse te vel, vim ei summo honestatis, no libris quidam inermis quo. Blandit sententiae no per. Ullum accumsan praesent usu ut, at usu verterem sententiae. Accumsan signiferumque et sit, id audiam patrioque vix. Ei accusam electram theophrastus eos, sea solet epicuri molestiae ad. No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id. No sit dicant denique adipisci, habemus scaevola mei ne, qui no solum idque verterem. Mei ut etiam everti atomorum. Vis ex tibique appetere, ei sed tota aperiri scripserit. Mei verterem antiopam constituam an, id quodsi tibique quo, detracto iudicabit similique ex his. Graece vocibus mediocrem no pri, cu odio suas his. Sea in fabulas oportere adversarium, eu eos quodsi latine fabellas.</p>
                    <<p>dolor sit amet, epicurei neglegentur sit an, libris numquam ius ei. Appareat volutpat imperdiet no vim, ut suas aliquid sanctus quo. At duo quot essent suscipit. Vis an atomorum accusamus. Est at nemore ponderum. No nec voluptua conceptam, detraxit splendide disputando nam ea. Ne eum vocibus inimicus democritum, erant praesent eam in, agam ludus verterem an pro. Erant vidisse te vel, vim ei summo honestatis, no libris quidam inermis quo. Blandit sententiae no per. Ullum accumsan praesent usu ut, at usu verterem sententiae. Accumsan signiferumque et sit, id audiam patrioque vix. Ei accusam electram theophrastus eos, sea solet epicuri molestiae ad. No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id.</p>
                         <h1>Extras</h1>

                        <p>No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id.</p>h1>Lorem ipsum</h1>
                         <h2>Sub heading</h2>

                        <p>No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id.</p>
                </div>
            </div>

</html>
</body>

这是我的CSS。 。

body {
     background: url(images/heart.jpg) bottom left no-repeat fixed;
     margin-bottom: 100px;
     background-color:#c4c2c9;
 }
 #
     text-transform:uppercase;
     font-size: 12px;
     font-family:"Times new Roman";
     padding-left: 40px;
     color:#FFFFFF;
     text-decoration:none;
 }
 A:hover.navi {
     color:#FFFFFF;
     text-decoration:underline;
 }
 A:visited.navi {
     color:#FFFFFF;
     text-decoration:none;
     font-size: 12px;
 }
 p {
     word-spacing:3px;
     font-size: 12px;
     color:#050505;
     font-family:"Times new Roman";
 }
 p2 {
     word-spacing:3px;
     font-size: 12px;
     color:#050505;
     font-family:"Times new Roman";
 }
 h1 {
     text-transform:uppercase;
     color:#050505;
     font-family:"Times New Roman";
     letter-spacing:10px;
     font-size: 19px;
 }
 h2 {
     text-transform:uppercase;
     color:#050505;
     padding-bottom: 3px;
     border-bottom: solid 2px #d7d7d7;
     font-family:"Times New Roman";
     letter-spacing:10px;
     font-size: 9px;
 }
 a:link {
     color:##050505;
     text-decoration:none;
     font-size: 12px;
 }
 a:visited {
     color:##050505;
     text-decoration:none;
 }
 a:hover {
     color:#050505;
     text-decoration:underline;
 }
 a:active {
     color:#050505;
     text-decoration:none;
 }

3 个答案:

答案 0 :(得分:0)

这是因为您的.box位于绝对位置并且增加了额外的空间,请尝试调整padding-bottom:

答案 1 :(得分:0)

添加一个类.height的div,并为其提供高度:30px而不是添加margin-bottom:30px

            <div id="content">
                <div class="box">
                     <h1>Lorem ipsum</h1>
                    <p>YOUR CONTENT</p>
                <div class="height"></div>
                </div>
            </div>

Css:

.height {
    height: 30px;
}

答案 2 :(得分:0)

margin-bottom需要一个元素才能在行动中反弹。我做了一个例子来解释它,试试here。你会看到当你有一个段落时,那么第一个段落确实有一个边缘底部,但是在它下面没有一个元素它就没有了。

您可以解决此问题,将填充底部添加到父元素like this