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

【问题标题】：Why when i add the src to image using jQuery custom plugin, the paragraph is getting moved down?为什么当我使用 jQuery 自定义插件将 src 添加到图像时，段落会向下移动？
【发布时间】：2023-04-06 13:37:01
【问题描述】：

这是我的代码

<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>

如果我不将 imageURL 添加到选项然后设置宽度、高度并且它工作得很好。

但是当我添加 imageURL 选项时，图像会链接到其源，但段落会向下移动一点，为什么会发生这种情况？好奇怪！

谢谢。

【问题讨论】：

将vertical-align: top; 给#boxOne。

标签： jquery html css jquery-plugins

【解决方案1】：

将您的 CSS 更改为：

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

<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;
            vertical-align: top;
        }
    </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>

【讨论】：

但没有空格..同时我不是downvoter
有问题你可以看到四个块。在你的答案中它只显示两个..我认为你只需要为boxOne id做css
我还是很困惑，我使用了相同的 sn-p，只添加了一行代码，我可以在这里看到四个块，没有这样的迹象表明只对 boxOne 使用 css 跨度>
您在我的问题中看到每个框都是分开的，但在您的答案中，顶部两个框和底部两个框之间没有任何空间，这使得它们看起来像两个框。这就是其他人所说的。
知道了，我在全页模式下看这个

【解决方案2】：

您需要将 display:block; 分配给 img 以适合该框。因为你所有的块都是inline-block。

<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).css('display',settings.imgdisplay);
            }
        }(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" ,
            imgdisplay: "block"
            });
        })
    </script>
</head>

<body>
    <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
    <p id="boxOne">
        <img src=""  />
    </p>
</body>

</html>

【讨论】：

感谢您的回答，即使其他人的回答都是正确的，您的回答正是我想要的！

【解决方案3】：

在标签内使用para，它将很好地排列Ur数据，由于图像阴影它发生

【讨论】：

【解决方案4】：

只需插入：

#boxOne img {
   position: absolute;
}

<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;
        }
        #boxOne img {
            position: absolute;
        }
    </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>

【讨论】：

【解决方案5】：

将vertical-align: top; 给#boxOne。

最好给vertical-align: top; 和display: inline-block。默认值vertical-align 被认为是baseline。

【讨论】：

【解决方案6】：

添加p标签的style属性向左浮动。

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

【讨论】：