为什么当我使用jQuery自定义插件将src添加到图像时，段落会向下移动？

这是我的密码

使用插件的盒子
（函数（$）{
$.fn.boxPlugin=函数（选项）{
//默认值
变量设置=$.extend({
颜色：“绿色”，
宽度：“100px”，
高度：“100px”，
背景颜色：“黑色”，
imageURL:“”，
显示：“内联块”
}，选项）；
$（this）.addClass（'boxAdded'）.css（{“color”：settings.color，“width”：settings.width，“height”：settings.height，“backgroundColor”，“display”：settings.display}）.find（'img'）.attr（'src'，settings.imageURL）；
}
}（jQuery））；
p{
边际：0px；
}
$（函数（）{
$（“.box”）.boxPlugin（{宽度：“200px”，高度：“200px”，背景色：“浅蓝色”}）；
$（“#boxOne”）.boxPlugin（{宽度：“200px”，高度：“200px”，背景颜色：“浅蓝色”，图像URL:“https://www.w3schools.com/images/w3schools_green.jpg" });
})

将您的

CSS

更改为：

p {
   margin: 0px;
   vertical-align: top;
}

使用插件的盒子
（函数（$）{
$.fn.boxPlugin=函数（选项）{
//默认值
变量设置=$.extend({
颜色：“绿色”，
宽度：“100px”，
高度：“100px”，
背景颜色：“黑色”，
imageURL:“”，
显示：“内联块”
}，选项）；
$（this）.addClass（'boxAdded'）.css（{“color”：settings.color，“width”：settings.width，“height”：settings.height，“backgroundColor”，“display”：settings.display}）.find（'img'）.attr（'src'，settings.imageURL）；
}
}（jQuery））；
p{
边际：0px；
垂直对齐：顶部；
}
$（函数（）{
$（“.box”）.boxPlugin（{宽度：“200px”，高度：“200px”，背景色：“浅蓝色”}）；
$（“#boxOne”）.boxPlugin（{宽度：“200px”，高度：“200px”，背景颜色：“浅蓝色”，图像URL:“https://www.w3schools.com/images/w3schools_green.jpg" });
})

使用para-inside标签，它将以良好的方式排列您的数据，

---

由于出现图像阴影

您需要指定

显示：块至img，以适合该框。因为您的所有块都是
内联块



使用插件的盒子
（函数（$）{
$.fn.boxPlugin=函数（选项）{
//默认值
变量设置=$.extend({
颜色：“绿色”，
宽度：“100px”，
高度：“100px”，
背景颜色：“黑色”，
imageURL:“”，
显示：“内联块”
}，选项）；
$（this.addClass（'boxAdded'）.css（{
“颜色”：settings.color，
“宽度”：settings.width，
“高度”：settings.height，
“背景”：settings.backgroundColor，
“display”：settings.display}）.find（'img'）.attr（'src'，settings.imageURL）.css（'display'，settings.imgdisplay）；
}
}（jQuery））；
p{
边际：0px；
}
$（函数（）{
$（“.box”）.boxPlugin（{宽度：“200px”，高度：“200px”，背景色：“浅蓝色”}）；
$（“#boxOne”）.boxPlugin（{
宽度：“200px”，
高度：“200px”，
背景颜色：“浅蓝色”，
图像URL:“https://www.w3schools.com/images/w3schools_green.jpg" ,
imgdisplay：“块”
});
})





只需插入：

#boxOne img {
   position: absolute;
}



使用插件的盒子
（函数（$）{
$.fn.boxPlugin=函数（选项）{
//默认值
变量设置=$.extend({
颜色：“绿色”，
宽度：“100px”，
高度：“100px”，
背景颜色：“黑色”，
imageURL:“”，
显示：“内联块”
}，选项）；
$（this）.addClass（'boxAdded'）.css（{“color”：settings.color，“width”：settings.width，“height”：settings.height，“backgroundColor”，“display”：settings.display}）.find（'img'）.attr（'src'，settings.imageURL）；
}
}（jQuery））；
p{
边际：0px；
}
#boxOne img{
位置：绝对位置；
}
$（函数（）{
$（“.box”）.boxPlugin（{宽度：“200px”，高度：“200px”，背景色：“浅蓝色”}）；
$（“#boxOne”）.boxPlugin（{宽度：“200px”，高度：“200px”，背景颜色：“浅蓝色”，图像URL:“https://www.w3schools.com/images/w3schools_green.jpg" });
})





将p标记浮动的样式属性添加到左侧

p {
   margin: 0px;
   float: left;
}

给出
垂直对齐：顶部至
#boxOne

最好给出
垂直对齐：top带
显示：内联块
。
默认值
垂直对齐
被视为
基线
给定
垂直对齐：顶部到
#boxOne
。但是