Check out the code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Box using Plugin</title>
<script>
(function ($) {
$.fn.boxPlugin = function (options) {
//default values
var settings = $.extend({
color: "green",
width: "100px",
height: "100px",
backgroundColor: "black",
imageURL: "",
display: "inline-block"
}, options);
$(this).addClass('boxAdded').css({ "color": settings.color, "width": settings.width, "height": settings.height, "background": settings.backgroundColor, "display": settings.display }).find('img').attr('src', settings.imageURL);
}
}(jQuery));
</script>
<style>
p {
margin: 0px;
}
</style>
<script>
$(function () {
$(".box").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue" });
$("#boxOne").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue", imageURL: "https://www.w3schools.com/images/w3schools_green.jpg" });
})
</script>
</head>
<body>
<p class="box"></p>
<p class="box"></p>
<p class="box"></p>
<p id="boxOne">
<img src="" />
</p>
</body>
</html>If I don't include the imageURL option in the settings, everything works fine with the width and height set as expected.
However, when I add the imageURL option, the image links correctly but the paragraph moves down slightly. Can someone explain why this is happening? It's quite puzzling!
Thank you.