boxsizing.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> CSS box-sizing example </title>
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/boxsizing.css">
</head>

<body>


<h1>A box model test page with box-sizing</h1>

<div>
	<p>Below are two bordered DIV elements. They have exactly the same CSS styles, with <em>one exception</em>: The top one has <code>box-sizing: border-box</code>, and the bottom one does not.</p>
</div>

<div class="with-bs">
	<p>Ravana carries Sita away to Lanka, where Sita is kept under the heavy guard of rakshasis. Ravana demands Sita marry him, but Sita, eternally devoted to Rama, refuses. Rama and Lakshmana learn about Sita's abduction, and immediately set out to save her. During their search, they meet the demon Kabandha and the ascetic Shabari, who direct them towards Sugriva, the monkey king, and Hanuman.</p>
</div>

<div class="without-bs">
	<p>Having received Hanuman's report on Sita, held prisoner in Lanka, Rama and Lakshmana proceed with their allies towards the shore of the southern sea. There they are joined by Ravana's renegade brother Vibhishana. The monkeys construct a giant floating bridge across the ocean, and the princes and their army cross over to Lanka. A lengthy battle ensues, in which Rama eventually kills Ravana.</p>
</div>

<div>
	<p>The top bordered DIV element is constrained to the width specified for all DIVs on this page &mdash; including the DIV that encloses this paragraph. The bottom bordered DIV is wider because the border width and the padding width have been <em>added</em> to the DIV's specified width (which may be given in rems, ems, pixels, or percent).</p>

	<p>Read more about <a href="https://tympanus.net/codrops/css_reference/box-sizing/">box-sizing</a> and the box model.</p>
</div>

<footer class="centered">
<p><a href="index.html">index</a> | <a href="https://github.com/macloo/html_css_templates">GitHub</a><br>
	Text adapted from Wikipedia entry <a href="http://en.wikipedia.org/wiki/Ramayana">Ramayana</a>.</p>
</footer>

</body>
</html>