CODEWITHSUNDEEP
htmlcssbackground
Cataclysm88
Cataclysm88

Reputation: 13

How to limit a border in CSS towards an image?

body {
    margin: 0;
}

.banner {
    display: block;
    margin: 0 auto;
}

.icon {
    width: 50px;
    height: 50px;
    float: left;
}

.title {
    font-size: 20px;
}

.desc {
    padding-top: 7px;
}

.images {
    padding-left: 580px;
}

.images img {
    padding-right: 10px;
}

.images img:hover {
    cursor: pointer;
}

.header_inner {
    border: 1px solid black;
}
<!doctype html>

<html>

    <head>
        <title>Nightmare</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <link rel="icon" href="icon.jpg">
    </head>

    <body>
        <div class="header">
            <div class="header_inner">
                <img class="banner" src="https://cdn.pixabay.com/photo/2021/09/12/07/58/banner-6617550__340.png">
                <div class="images">
                    <img class="icon" src="https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fA%3D%3D&w=1000&q=80">
                    <p class="desc"><span class="title">Test</span><br>Test</p>
                </div>
            </div>
        </div>
    </body>

</html>

How to change border size to the border size of an image and the footer part of an image, because the border size is not the current size of the image, and I do not know how to fix it. How can I do that?

Upvotes: 0

Views: 118

Answers (2)

rozhan
rozhan

Reputation: 341

you mean something like this? you can just apply border for your image. if you want to put something between border and image you can give a padding to image or position relative and absolute to something you want to put inside them. i hope i got your problem right.

.img {
border: 5px solid black
}
<!doctype html>

<html>

    <head>
        <title>Nightmare</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <link rel="icon" href="icon.jpg">
    </head>

    <body>
     <img class="img" src="https://www.gravatar.com/avatar/453426250a239cbb367afe61dca91a68?s=48&d=identicon&r=PG&f=1" />
    </body>

</html>

Upvotes: 1

user14101905
user14101905

Reputation: 19

Instead of

.header_inner {
    border: 1px solid black;
}

do

.banner {
    border: 1px solid black;
}

Upvotes: 0

Related Questions