我有一个包含 div (#anniversary-container)，里面有一个 img，但是 div 右边有一个边距。我在 Chrome 中使用了检查元素，它说没有边距，但它旁边显示了橙色空间。我试图让联系信息位于右侧，但它不允许。我已经尝试设置 margin:0 和 padding:0。
问题出在欢迎标题下方，该 div 中的图片显示庆祝天主教服务 60 周年。 自己看看。
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Saint Anthony Claret Catholic Church is a humble church in which Catholics from all over the city can come together and worship, confess or make use of our various services" />
<meta name="keywords" content="saint, anthony, church, mass, confession, baptism, confirmation, wedding, matrimony, anaheim, california" />
<meta http-equiv="author" content="Eduardo Pelaez" />
<title>St. Anthony Catholic Church</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page">
<div id="header">
<img src="images/logo.png" width="860" height="241" alt="St. Anthony Claret logo" />
<div id="nav">
<ul id="nav-ul">
<a href="index.html"><li>Home</li></a>
<a href="#"><li>Services</li></a>
<a href="#"><li>Groups & Ministries</li></a>
<a href="#"><li>Schedule</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>About</li></a>
</ul>
</div><!-- end #nav-ul -->
</div><!-- end #header -->
<div id="content">
<div id="feature">
<img src="images/feature-img.jpg" width="1250" height="350" alt="Picture of our altar" id="feature-img" />
</div><!-- end #feature -->
<div id="col1">
<div class ="col1-sec sec" id="col1-sec1">
<h2>Welcome</h2>
<div id="anniversary-container">
<img src="images/anniversary-img.jpg" width="862" height="840" alt="Celebrating 60 years of Catholic service" id="anniversary-img" />
</div><!-- end #anniversary-container -->
<div id="contact-container">
<p>1450 E. La Palma Avenue, Anaheim, CA 92805-1551</p>
<p><span class="contact-text">Phone</span> 714-776-0270</p>
<p><span class="contact-text">Fax</span> 714-776-6022</p>
<p><span class="contact-text">Email</span> <a href="mailto:stanthonyclaret@yahoo.com">stanthonyclaret@yahoo.com</a></p>
</div><!-- end #contact-container -->
</div><!-- end #col1-sec1 -->
<div class="col1-sec sec" id="col1-sec2">
<h2>Clergy</h2>
<p><span class="clergy-header">Pastor</span></p>
<p>Rev. Bill Cao</p>
<p><span class="clergy-header">Parochial Vicars</span></p>
<p>Rev. Douglas Zavala</p>
<p>Rev. Benjamin D. Hoang</p>
<p><span class="clergy-header">Deacons</span></p>
<p>Mr. August Mones</p>
<p>Mr. Salvador Sánchez</p>
</div><!-- end #col1-sec2 -->
<div class="col1-sec sec" id="col1-sec3">
<h2>Office Hours</h2>
<p><span class="hours-text">Weekdays</span> 9:00 AM to 8:00 PM</p>
<p><span class="hours-text">Saturdays</span> 9:00 AM to 5:30 PM</p>
<p><span class="hours-text">Sundays</span> 9:00 AM to 12:30 PM</p>
</div><!-- end #col1-sec3 -->
</div><!-- end #col1 -->
<div id="col2">
<div class="col2-sec sec" id="col2-sec1">
<p><span class="sidebar-header">Mass Schedule</span></p>
<p><span class="mass-header">Sunday</span></p>
<p>06:30 AM - English</p>
<p>08:00 AM - Español</p>
<p>09:30 AM - English</p>
<p>11:00 AM - English</p>
<p>12:30 PM - Español</p>
<p>05:00 PM - Español</p>
<p>06:30 PM - Español</p>
<p><span class="mass-header">Saturday Vigil</span></p>
<p>05:00 PM - English</p>
<p><span class="mass-header">Monday-Friday</span></p>
<p>06:30 AM - English</p>
<p>08:30 AM - English</p>
<p><span class="mass-header">Saturday</span></p>
<p>08:00 AM - English</p>
<p><span class="mass-header">Friday</span></p>
<p>07:00 PM - Español</p>
<p><span class="mass-header">Thursday</span></p>
<p>07:00 PM - Español</p>
<p><span class="mass-header">Perpetual Help Novena Wednesdays</span></p>
<p>07:00 PM - English</p>
</div><!-- end #col2-sec1 -->
<div class="col2-sec sec" id="col2-sec2">
<p><span class="sidebar-header">Confessions</span></p>
<p><span class="confessions-header">Wednesdays</span></p>
<p>05:30 to 06:30 PM</p>
<p><span class="confessions-header">Saturdays</span></p>
<p>03:30 to 04:30 PM<br />or by appointment</p>
</div><!-- end #col2-sec2 -->
<div class="col2-sec sec" id="col2-sec3">
<p><span class="sidebar-header">May Fiesta Contests</span></p>
<p>Pie Baking Contest</p>
<div id="pie-contest">
<a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/pie%20baking%20flyer.pdf"><img src="images/pie-contest.png" width="468" height="487" alt="Announcement for pie baking contest" /></a>
</div><!-- end #pie-contest -->
<p>Salsa Recipe Contest</p>
<div id="salsa-contest">
<a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/salsa%20contest.pdf"><img src="images/salsa-contest.png" width="479" height="527" alt="Announcement for salsa recipe contest" /></a>
</div><!-- end #salsa-contest -->
<div id="karaoke-contest">
<a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/Karaoke%20Flyer.pdf"><img src="images/karaoke-contest.png" width="405" height="475" alt="Announcement for karaoke contest" /></a>
</div><!-- end #karaoke-contest -->
</div><!-- end #col2-sec3 -->
<div class="col2-sec sec" id="col2-sec4">
<p><span class="sidebar-header">Links</span></p>
<ul>
<li><a href="http://www.ccoc.org/">Catholic Charities</a></li>
<li><a href="http://www.rcbo.org/">Diocese of Orange</a></li>
<li><a href="http://w2.vatican.va/content/vatican/en.html">The Holy See</a></li>
</ul>
</div><!-- end #col2-sec4 -->
<div class="col2-sec sec" id="col2-sec5">
<p><span class="sidebar-header">Financial Report</span></p>
<div id="financial-report">
<a href="http://stanthonyclaret.org/announcements-anuncios/"><img src="images/report.png" width="833" height="1069" alt="Cover for the report of our expenses" /></a>
</div><!-- end #financial-report -->
<p>Fiscal Year Ending</p>
<p>06.30.14</p>
</div><!-- end #col2-sec5 -->
</div><!-- end #col2 -->
</div><!-- end #content -->
<div id="footer">
<p>Copyright © 2015 Saint Anthony Claret Catholic Church - All Rights Reserved</p>
</div><!-- end #footer -->
</div><!-- end #page -->
</body>
</html>
CSS
body {
width: 90%;
margin: 0 auto;
text-align: center;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
#col1, #col2 {
float: left;
margin: 1%;}
#col1 {
width: 62.6%;}
#col2 {
width: 31.3%;
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
padding: 0.5em 0;}
#feature, .sec {
margin-bottom: 1em;
background-color: #efefef;} /* remove background color when completed */
/* end general styling */
#feature-img {
height: auto;
width: 100%;}
/* end feature styling */
#anniversary-img {
max-width: 100%;
max-height: 100%;
float: left;}
#anniversary-container {
height: 15em;
width: 15em;
margin: 0;
padding: 0;} /* make container proportionate to img */
#contact-container {
width: 15em;
float: right;} /* make element float inside #anniversary-container */
最佳答案
正如您所说“我正在尝试让联系信息位于右侧但是”
如果你想要右边的图片和左边的联系信息。您需要将两者都放在父 div 中，并向左添加 float 到图像，向右添加 float 以联系 div，并将两者都清除到下一个 div。
它会解决你的问题。
查看已解决的问题
#anniversary-container
还注意到您为图像提供了 800 像素的高度，它将占据整个高度并且 div 看起来很奇怪。
此外，Divs 是 block 级元素，这意味着它们总是扩展到其容器宽度的 100%。
关于html - 即使 margin & padding 值为 0，Div 也有 margin-right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31065317/