Home >Web Front-end >CSS Tutorial >How to set element width in css
How to set element width in css
- 青灯夜游Original
- 2021-09-13 17:28:328909browse
Setting method: 1. Use the width attribute to set the width, the syntax "width: width value;"; 2. Use the min-width attribute to set the minimum width, the syntax "min-width: width value;"; 3. Use the max-width attribute to set the maximum width, the syntax "max-width: width value;".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css sets the width of the element
1. Use the width attribute
width attribute to set the width of the element width. This attribute defines the width of the element's content area. Padding, borders, and margins can be added outside the content area.
<html>
<head>
<style type="text/css">
img
{
width: 300px
}
</style>
</head>
<body>
<img src="eg_smile.gif" / alt="How to set element width in css" >
</body>
</html>Rendering:
2. Use the min-width attribute
min-width Property sets the minimum width of the element. This attribute value sets a minimum limit on the width of the element. Therefore, the element can be wider than the specified value, but not narrower. Negative values are not allowed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.min{
min-width: 300px;
}
</style>
</head>
<body>
<textarea>文本框默认宽度</textarea><br>
<textarea class="min">文本框最小宽度300px</textarea>
</body>
</html>Rendering:
3. Use the max-width attribute
max-height attribute to set the element the maximum height. This attribute value sets a maximum limit on the height of the element. Therefore, the element can be shorter than the specified value, but not taller. Negative values are not allowed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<textarea>文本框默认宽度</textarea><br>
<textarea style="max-width: 400px;">文本框最大宽度400px</textarea>
</body>
</html>Rendering:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set element width in css. For more information, please follow other related articles on the PHP Chinese website!