Setting the Sized Box
box-sizing sets which part of an element's box is used for sizing. Its allowed values:
- content-box
- padding-box
- border-box
- margin-box
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
div {
width: 75%;
height: 100px;
border: thin solid black;
}
p {
background: lightgray;
border: 4px solid black;
margin: 2px;
height: 50%;
}
#first {
box-sizing: border-box;
width: 50%;
}
#second {
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p id='first'>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p id='second'>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</div>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Size:
- Controlling the Size of an Element
- Setting Minimum height
- Setting Minimum width
- Setting Maximum width
- Setting Maximum height
- Setting the Sized Box
Related: