0

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;
 }
4

3 回答 3

0

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

于 2013-08-22T04:31:53.630 回答
0

margin-bottom需要一个元素在行动中反弹才能发挥作用。我做了一个例子来解释它,在这里试试。你会看到,当你有一个段落时,第一段确实有一个底部边距,但如果没有它下面的元素,它就没有。

您可以解决它,像这样向父元素添加一个 padding-bottom 。

于 2013-08-22T07:03:00.193 回答
0

添加一个带类的 div.height并为其提供 height: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;
}
于 2013-08-22T04:46:19.567 回答