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的间隙。

Answer 2

您好我为您制作了一个小提琴：http://jsfiddle.net/shannabarnard/meh15n6h/

用这个CSS替换你的CSS，寄宿生将整齐地包裹你的图像：

#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: 0;
margin-left: 0;

 }


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

}

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

 }

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

边框不适合图像

2 个答案: