cpp
/
RmlUi
zrcadlo https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<rml>
<head>
	<title>Box-sizing property</title>
	<link type="text/rcss" href="../style.rcss"/>
	<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing" />
	<meta name="Description" content="Box-sizing property." />
	<style>
		div > div {
			width: 50%;
			margin: 10dp 0;
			padding: 20dp;
			border: 10dp #999;
			background-color: #aaf;
		}
		.border-box {
			background-color: #aea;
			box-sizing: border-box;
		}
		.float {
			float: left;
		}
		.margin {
			width: 23.3%;  /* width + margins should be 33.3% */
			margin-left: 5%;
			margin-right: 5%;
			border-width: 20dp;
		}
		.fill {
			height: 200dp;
			border: 15dp #ffa;
			background: #f00;
			overflow: auto;
		}
		.fill > div {
			width: 100%;
			height: 50%;
			margin: 0 auto;
		}
	</style>
</head>

<body>
<p>Setting the 'box-sizing' property on elements using the same width and height.</p>
<div>
	<div>box-sizing: content-box</div>
	<div class="border-box">box-sizing: border-box</div>
</div>
<hr/>
<p>The following boxes should line up side-by-side.</p>
<div>
	<div class="border-box float"/>
	<div class="border-box float"/>
</div>
<hr/>
<div>
	<div class="margin border-box float"/>
	<div class="margin border-box float"/>
	<div class="margin border-box float"/>
</div>
<hr/>
<p>There should be no scrollbars, and no red visible.</p>
<div class="fill">
	<div class="border-box"/>
	<div class="border-box"/>
</div>
</body>
</rml>