Question

我已经在这一段时间了，这里是我的HTML和CSS一起简化了。我确定它很简单，但我无法弄清楚我的生活。我只需要删除边框和内容之间的空白区域。

<!DOCTYPE html>
<html lang="en-US">

<head>

<!--CSS Internal Style Sheet-->
<style>

HTML
{
border: 20px solid gray;
margin: auto;
}
#center
{
background-color: #EEE8AA;
padding: 0;
}

p
{
    text-align: left;
margin-left: auto;
margin-right: auto;
padding: inherit;
width: 800px;
}

dl
{
text-align: left;
margin-left: auto;
margin-right: auto;
top-padding: 10px;
height: 500px;
width: 800px;
}
.box
{
background-color: #DCDCDC;
border: 1px solid #666;
padding: 5px;       
}

#banner
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
background-image: url(file:///C:/Users/Tollis/Documents/Website/Banner.png)
}

header
{
text-align: center;
font-size: 50px;
padding: 0;
background-color: #98FB98;
}

.menu
{
text-align: center;
padding-bottom: 30px;
padding-top: 30px;
background-color: #98FB98;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

li
{
    display: inline;
}
</style>

<title> Module One Activity </title>

</head>

<body>

<header> Module One Activity </header>    

<!--Navigation Bar-->
<div class="menu">
    <ul>
    <li> <a href="Page1.htm"> Page 1 </a> </li>
    &nbsp &nbsp
        <li> <a href="Page2.htm"> Page 2 </a> </li>
    &nbsp &nbsp
    <li> <a href="Page3.htm"> Page 3 </a> </li>
    &nbsp &nbsp
    <li> <a href="Page4.htm"> Page 4 </a> </li>
    </ul>
<div id="center">

<hr>

   <p class="box" text-align="center"> <i> <b> Statement: </b> If students are allowed to use technology such as computers, calculators and tablets, then they will be able to develop a deeper understanding of the math concepts presented within their course. </i> </p>

     <hr>

    <h2 class="back" align="center"> Part 1 </h2>

    <p> <b> Inverse: </b> If students are not allowed to use technology such as computers, calculators and tablets, then they will not be able to develop a deeper understanding of the math concepts presented within their course.</p>


<br>
<hr>
</div>



</body>

<footer>



    <p> Created by: Tollis Hunt </p>

    <p> Contact information: <a href="mailto:example@gmail.com"> Email me! </a></p>

    <br>
  </footer>

Answer 1

在CSS中试试这个：

body
{
    margin:0;
    padding:0;
}

这将删除内容和边框之间的空白区域。希望它有所帮助。

Demo

如何删除边框和内容之间的白色？

1 个答案: