Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Box Model Properties

padding

padding Used to control the space between the element content and the border. You can set padding for each side of the element (top, right, bottom, left). The padding unit can be pixels (px), percentage (%), etc.

.element {
    padding: 10px; /* 上下左右的内边距都为10像素 */
    padding-top: 20px; /* 上边距为20像素 */
    padding-right: 15px; /* 右边距为15像素 */
    padding-bottom: 10px; /* 下边距为10像素 */
    padding-left: 5px; /* 左边距为5像素 */
}
1
2
3
4
5
6
7

border

border Used to set the border of an element, including the border width, style, and color.

.element {
    border: 2px solid #000; /* 设置2像素宽的实线黑色边框 */
    border-width: 2px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-color: #000; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
}
1
2
3
4
5
6
7

Size attributes

width

width Used to set the width of an element. The unit can be pixels (px), percentage (%), viewport width unit (vw), etc.width Sets the width of the content area only, excluding padding, borders, and margins.

.element {
    width: 200px; /* 设置宽度为200像素 */
    width: 50%; /* 设置宽度为父元素宽度的50% */
}
1
2
3
4

height

height Used to set the height of an element. The unit can be pixels (px), percentage (%), viewport height unit (vh), etc.height Sets the height of the content area only, excluding padding, borders, and margins.

.element {
    height: 100px; /* 设置高度为100像素 */
    height: 50%; /* 设置高度为父元素高度的50% */
}
1
2
3
4

Layout properties

display

display The attribute is used to define the display type of an element. Common values ​​include:

• block: Block-level element, occupies the entire width of the parent container, and wraps by default.
• inline: Inline element, only occupies the width of its content and will not wrap.
• inline-block: Inline block-level elements, arranged like inline elements, but the width and height can be set.
• none: Hidden elements are not displayed on the page and do not occupy space.
• flex: Enables flexible box layout and arranges child elements in a line.
• grid: Enables grid layout and arranges child elements in a grid.

.element-block {
    display: block; /* 设置为块级元素 */
}

.element-inline {
    display: inline; /* 设置为内联元素 */
}

.element-inline-block {
    display: inline-block; /* 设置为内联块级元素 */
}

.element-none {
    display: none; /* 隐藏元素 */
}

.container-flex {
    display: flex; /* 启用弹性布局 */
}

.container-grid {
    display: grid; /* 启用网格布局 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Overview

By combining padding、border、width、height anddisplay With properties like , you can flexibly control the size, spacing, and layout of elements. These properties are the basis for building responsive and beautiful web pages. Here is a comprehensive example showing how to use these properties together to create a block-level element with padding, borders, specific width, and height:

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #000;
    display: block;
}
1
2
3
4
5
6
7

In this example,.box The element is set to be a block-level element with a width of 300 pixels and a height of 150 pixels, with a 20-pixel padding and a 5-pixel solid black border. This ensures that there is enough space between the element's content and the border, while the border clearly defines the element's outer boundaries.

I hope these explanations are helpful, if you have any further questions or need more examples please let me know!