How to set div size with css?-Front-end Q&A-php.cn

How to set div size with css?

藏色散人

Release： 2023-01-05 16:11:17

Original

2722 people have browsed it

How to set the div size in css: first create an HTML sample file; then create a div in the body; and finally set the width and height attributes for the div.

How to set div size with css?

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

In HTML, the div tag element is a block element that can set the size (width and height) of the element. So how to set it up? The following article will introduce it to you, I hope it will be helpful to you.

First let’s learn about block elements

The representative block element is div, others such as p, nav, aside, header, footer, section, article, ul-li, address Wait, it can all be achieved using div. However, in order to facilitate programmers to interpret the code, specific semantic tags are generally used to make the code more readable and easy to check for errors.

Features of block elements:

1. Height, line height, margins and padding can all be controlled.

2. Always start on a new line and occupy a whole line; that is, it can automatically wrap lines.

3. It can accommodate inline elements and other block elements.

4. The bandwidth is always the same as the browser width, regardless of the content.

5. Multiple block element tags are written together, and the default arrangement is from top to bottom

[Recommended learning: css video tutorial]

How to set div size in css?

In CSS, you can use the width attribute and height attribute to set the div size. The width attribute sets the width of the element, and the height attribute sets the height of the element.

The width and height attributes define the width and height of the element's content area. Pads, borders, and margins can be added outside the content area.

Example:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <style type="text/css">
   div{
   border: 1px solid red;
   }
   .box{
   width: 300px;
   height: 100px;
   }
   </style>
</head>
<body>
  <div>普通div</div><br />
  <div class="box">设置宽度为300px，高度为100px的div</div>
</body>
</html>

Copy after login

Rendering:

How to set div size with css?

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