html - 边框不适合图像

Question

我正在尝试为我的图像添加边框，但无法使其适合。它比图像大。我花了很多时间试图弄清楚这一点，但没有运气!任何帮助，将不胜感激!谢谢!我当前的代码如下:

<div id="main-border">
<img src="../desktop/atitlan.jpg" width="250px" class="wrap">
<h1><strong>About</strong></h1>
<p>The name "Paris" is derived from its early inhabitants, the Celtic Parisii tribe.Paris is often referred to as "The City of Light" ("La Ville Lumière"),[7] both because of its leading role during the Age of Enlightenment, and more literally because Paris was one of the first European cities to adopt gas street lighting. In the 1860s, the boulevards and streets of Paris were illuminated by fifty-six thousand gas lamps. Since the late 19th century, Paris is also known as Panam in French slang. Inhabitants are known in English as "Parisians" and in French as Parisien, pejoratively also called Parigots</p>

</div>



#main-border {
background : url(../desktop/background.gif);
background-size : 100% 100%;
height: 700px;
width: 650px;
margin-left: auto;
margin-right: auto;
float: left;
margin-top: 20px;
margin-left: 30px;

 }


#main-border p {
margin: 40px;
margin-top: 0;

}

.wrap {
float: left;
padding-top: 30px;
padding-left: 30px;
margin: 20px;
border: 1px solid black;

 }

#main-border h1 {
margin-bottom: 0;
text-indent: 1px;
 }

Answer 1

您需要从 .wrap 元素中删除填充。

这是在顶部和左侧添加 30px 的间隙。