Strange web page rendering

Issue

Why 'main' part border is jammed up against 'aside' part? Why there is no breathing room between 'aside' part and 'main' part border?

aside {
  float: left;
  width: 25%;
  padding: 10px;
}

main {
  border: 3px solid gray;
  padding: 10px;
  margin-left: 25%;
}

<aside>
  <h2>The standard Lorem Ipsum passage</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
</aside>
<main>
  <h2>What is Lorem Ipsum?</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
</main>

Solution

Actually the default value for property box-sizing is set to content-box by default which indicates that height and width of elements are calculated based on the size of content and not its padding, margin and border. So you should use box-sizing: border-box; for each element you wish its padding, margin and border (size) value affect its final dimensions.

* {
  box-sizing: border-box;
}

aside {
  float: left;
  width: 25%;
  padding: 10px;
}

main {
  border: 3px solid gray;
  padding: 10px;
  margin-left: 25%;
}

<aside>
  <h2>The standard Lorem Ipsum passage</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
</aside>
<main>
  <h2>What is Lorem Ipsum?</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
</main>

Answered By - Ahmad Modaghegh