How to set the size of html div

青灯夜游
Release: 2021-10-12 17:06:23
Original
21542 people have browsed it

html How to set the size of div: In the div tag, use the style attribute to set the "width: width value unit;" and "height: height value unit;" styles.

How to set the size of html div

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML,

can define a separated block or a region in the document.

tag can divide the document into independent and different parts. It can be used as a strict organizational tool and does not use any formatting associated with it.
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
  div{
  border: 1px solid red;
  }
  </style>
 </head>
 <body>
<div>测试文本</div>
<div>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
 </body>
</html>
Copy after login

How to set the size of html div

It can be seen that the width of the div tag defaults to full screen, and the height defaults to the content height.

But we can change the size of the div by manually setting its style:

Just use the style attribute to set "width: width value unit;" and "height:" in the div tag. Height value unit;" style is enough.

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
  div{
  border: 1px solid red;
  }
  </style>
 </head>
 <body>
<div style="width:200px ;">测试文本</div>
<div style="width:700px ;height: 100px;">测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
 </body>
</html>
Copy after login

Rendering:

How to set the size of html div

Recommended tutorial: "html video tutorial"

The above is the detailed content of How to set the size of html div. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template