Question 202330 in Html Question posted in
Some basic documentation can be found here.

Html – Please tell me why this occurs. When I am adding border to div tag, it adds extra lines to it. How to solve this problem?

HTML markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="container">
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad maxime accusantium neque id omnis, deleniti nisi, vitae eius quia reprehenderit reiciendis, blanditiis vero eligendi. Reprehenderit blanditiis a odio deleniti mollitia id accusamus! Libero ab corrupti quo rem magnam fuga sunt dolor, repellendus adipisci. Quis soluta, suscipit doloribus inventore distinctio a molestias quas autem qui dolore non est beatae tempora numquam aliquam dolorem ut consequuntur sapiente asperiores, cumque nostrum officia?
            </p>
        </div>

</body>
</html>

CSS:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

div {
    border: solid black 1px;
    margin: 30px;
    padding: 30px;
};

this is the problem

I have tried universal selector but did not find any help.

Please note that I did this in VS Code.

update: Now I am using the class selector and it works.
But still, the question occurs why I can’t use the div tag directly.

Tags:

2

Answers


  1. 0

    The extra lines you see are the combination of the borders and the margins overlapping each other. To fix this issue, you have two options:

    Here you have two Options:

    1: Remove the margin from div

    div {
   border: solid black 1px;
   padding: 30px;
}

    2: Add box-sizing: border-box;

    div {
    border: solid black 1px;
    margin: 30px;
    padding: 30px;
    box-sizing: border-box;
}

    Note: The box-sizing: border-box; property controls how the total width and height of an element are calculated.

    Login or Signup to reply.
  2. 0

    you can use :after, :before pseudo to add border.

    .container{
  position: relative;
}
.continer:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    border: solid black 1px;
    top: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search