0

My html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 01</title>

    <style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  background: #23424a;
  color: white;

  margin: 0 auto;

  text-align: center;
}

.intro-content {
  margin: 0 auto;
  border: solid 1px red;
}
    </style>
</head>

<body>
    <div class="container">
        <div class="intro-content">
            <h1>Lorem ipsum dolor sit.</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod unde rerum, deleniti ea obcaecati sint hic
                odit dicta tenetur qui ut dolorum provident sit, atque, reprehenderit nulla voluptate! Officiis,
                consectetur?</p>
            <p>Iste ipsa enim delectus porro, ullam repellendus maiores quis rem debitis cum, necessitatibus architecto
                dolor? Velit, ad quaerat blanditiis veritatis expedita totam vel voluptatem officiis officia ab modi
                voluptatibus obcaecati.</p>
            <p>Accusantium minima iusto nobis fuga hic explicabo unde illum, perferendis et animi aperiam quaerat, eaque
                deleniti alias blanditiis exercitationem commodi repudiandae ullam consequatur incidunt reiciendis
                repellat officia laboriosam. Esse, modi.</p>
            <p>Expedita cupiditate iure odit, delectus placeat optio magnam assumenda mollitia aspernatur at saepe nisi
                commodi natus excepturi voluptate. Recusandae nisi dolorem, necessitatibus optio aliquam repellat.
                Adipisci, incidunt. Consequuntur, natus nulla.</p>
        </div>
    </div>
</body>

</html>

When Div intro-content's border is set to 1px, intro-content box is of size 1594x238. But when I remove the border, it size is 1594x200 instead f 1594x236. Why is it so? Screenshots are below.

Screenshot with border enter image description here

Screenshot with no border enter image description here

user763410
  • 502
  • 6
  • 22
  • Looks like it's the same width. With a 1px border it adds 1px to *both* sides (2px). To keep the box the same size, the "inner" box is reduced by 2 because of the 2px border. – wazz Jan 03 '21 at 06:35
  • What about height? Why does height change, that too dramatically – user763410 Jan 03 '21 at 09:11

1 Answers1

-2

If the element is the first child it will add the margin-top to the parent element, collapsing with the margin-top of the parent element. Check Collapsing margins article for more information.

The question was already answered in Margin on child element moves parent element

As described there, you can just add the following css rules

.container {
  overflow: auto;
}
Viktor Ananin
  • 52
  • 7