Controlling the Size of an Element
The size-related properties are described in the following table:
Property | Description | Values |
---|---|---|
width | Set the width | auto or <length> or <%> |
height | Set the height | auto or <length> or <%> |
min-width | Set the minimum width | auto or <length> or <%> |
min-height | Set the minimum height | auto or <length> or <%> |
max-width | Set the maximum width | auto or <length> or <%> |
max-height | Set the maximum height | auto or <length> or <%> |
box-sizing | Sets which part of an element's box is used for sizing. | content-box | padding-box | border-box | margin-box |
auto means browser would do calcluation.
The default value for all these properties is auto.
The percentage values are calculated from the width of the containing block.
<!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%;
}
</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>
</div>
</body>
</html>
If the user resizes the browser window, the body element will be resized and this will lead to div element being resized.
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: