The box model in Ant Cube Card is based on the CSS box model, which represents all elements as rectangular boxes. Other styles determine the size, position, and properties (such as color, background, border, etc.) of these boxes.
The box model describes the control occupied by an element. Each box has four boundaries: margin edge, border edge, padding edge, and content edge.
Margins
The outer margin refers to the blank distance between elements and elements, which is controlled by the margin attribute. Both shorthand and and non-shorthand methods are supported.
Property | Description | Data type | Default value | Valid value | Writing | Remarks |
margin | Outer Border Distance | Length Unit | 0 | auto; Single Value Length Unit or Percentage | margin: 10px 10px 10px 10px; | The distances between the top, right, bottom, and left borders of the four property values in sequence |
margin: 10px 10px 10px; | The distances corresponding to the top, left, right, and bottom borders of the three property values in sequence | |||||
margin: 10px 10px; | Corresponding to the distance between the upper and lower borders and the left and right borders in sequence | |||||
margin: 10px; | The four sides have the same outer border distance. | |||||
margin-left | Length unit | 0 | auto; single value length unit or percentage | margin-left: 10px; | - | |
margin-right | Length unit | 0 | auto; single value length unit or percentage | margin-right: 10px; | - | |
margin-top | Length unit | 0 | auto; single value length unit or percentage | margin-top: 10px; | - | |
margin-bottom | Length unit | 0 | auto; single value length unit or percentage | margin-bottom: 10px; | - |
Padding
The padding refers to the distance between the content and the border, which is controlled by the padding property. Both shorthand and and non-shorthand methods are supported.
Property | Description | Data type | Default value | Valid value | Writing | Remarks |
padding | Padding | Length unit | 0 | auto; single value length unit or percentage | padding: 10px 10px 10px 10px; | The four property values correspond to the top, right, bottom, and left margins in sequence |
padding: 10px 10px 10px; | The three property values correspond to the top, left, right, and bottom margins in sequence. | |||||
padding: 10px 10px; | The two property values correspond to the top, bottom, left, and right margins in sequence. | |||||
padding: 10px; | The margins of the four sides are the same | |||||
padding-left | Length unit | 0 | auto; single value length unit or percentage | padding-left: 10px; | - | |
padding-right | Length unit | 0 | auto; single value length unit or percentage | padding-right: 10px; | - | |
padding-top | Length unit | 0 | auto; single value length unit or percentage | padding-top: 10px; | - | |
padding-bottom | Length unit | 0 | auto; single value length unit or percentage | padding-bottom: 10px; | - |
Content margin
Content margin refers to the width or height minus the distance between the border and the inner margin, that is: content margin = width/height - border border-inner margin.
Width and height
The box-sizing property of a card only supports border-box, which means that the width and height of the border area are set.
Property | Description | Data type | Default value | Valid value | Writing |
width | Element width | Length unit | 0 | auto; single value length unit or percentage | width: 100px; |
min-width | Minimum width limit | Length unit | - | - | min-width: 50px; |
max-width | Maximum width limit | Length unit | - | - | max-width: 200px; |
height | Element height | Length unit | 0 | auto; single value length unit or percentage | height: 100px; |
min-height | Minimum height limit | Length unit | - | - | min-height: 50px; |
max-height | Maximum height limit | Length unit | - | - | max-height: 200px; |
Border
Specifies the style of the border, including width, color, style, and rounded corners. Supports shorthand for border, border-left, border-top, border-bottom, and border-right. It also supports shorthand for border-style, border-width, border-color, and border-radius.
Property | Description | Data type | Default value | Valid value | Writing | Remarks |
border | Border | string | none | - | border: 1px solid #f32600; | Width, line style, and color. The position of the three elements is not limited. |
border-left | Left border | string | none | - | border-left: 1px solid #f32600; | |
border-right | Right border | string | none | - | border-right: 1px solid #f32600; | |
border-top | Top border | string | none | - | border-top: 1px solid #f32600; | |
border-bottom | Bottom border | string | none | - | border-bottom: 1px solid #f32600; | |
border-style | Border style | string | none | dotted solid dashed none | border-style: solid dotted dashed solid | The four property values correspond to the styles of the top, right, bottom, and left borders in sequence |
border-style: solid dotted solid | The three property values correspond to the styles of the top, left, right, and bottom borders in sequence. | |||||
border-style: solid dashed | The two property values correspond to the styles of the top, bottom, and left and right borders in turn. | |||||
border-style: solid | The four-sided border style is the same. | |||||
border-left-style | string | none | border-left-style: solid | - | ||
border-top-style | string | none | border-top-style: solid | - | ||
border-right-style | string | none | border-right-style: solid | - | ||
border-bottom-style | string | none | border-bottom-style: solid | - | ||
border-width | Border width | Length unit | 3px | - | border-width: 1px 1px 1px 1px | Corresponds to the width of the top, right, bottom, and left border in sequence |
border-width: 1px 1px 1px | Corresponds to the width of the top, left, right, and bottom borders in sequence | |||||
border-width: 1px 1px | Corresponds to the width of the upper and lower borders and the width of the left and right borders in sequence | |||||
border-width: 1px | Border width on four sides | |||||
border-left-width | Length unit | 3px | - | border-left-width: 1px | - | |
border-right-width | Length unit | 3px | - | border-right-width: 1px | - | |
border-top-width | Length unit | 3px | - | border-top-width: 1px | - | |
border-bottom-width | Length unit | 3px | - | border-bottom-width: 1px | - | |
border-color | Border color | Color unit | 0x000000 | - | border-color: red #333 rgb(255, 255, 0) green | Corresponds to the colors of the top, right, bottom, and left borders in sequence |
border-color: red #333 rgb(255, 255, 0) | Corresponds to the colors of the top, left, right, and bottom borders in sequence | |||||
border-color: red #333 | Corresponds to the colors of the upper and lower borders and the left and right borders in sequence | |||||
border-color: red | Color of the four borders | |||||
border-left-color | color unit | 0x000000 | - | border-left-color: red; | - | |
border-right-color | color unit | 0x000000 | - | border-right-color: red; | - | |
border-top-color | color unit | 0x000000 | - | border-top-color: red; | - | |
border-bottom-color | color unit | 0x000000 | - | border-bottom-color: red; | - | |
border-radius | Border corner radius | Length unit | 0 | - | border-radius: 10px 10px 10px 10px; | For more information, see the description of border-radius values at the bottom of the table. |
border-radius: 10px 10px 10px; | ||||||
border-radius: 10px 10px; | ||||||
border-radius: 10px; | ||||||
border-top-left-radius | Length unit | 0 | - | border-top-left-radius: 10px; | - | |
border-top-right-radius | Length unit | 0 | - | border-top-right-radius: 10px; | - | |
border-bottom-left-radius | Length unit | 0 | - | border-bottom-left-radius: 10px; | - | |
border-bottom-right-radius | Length unit | 0 | - | border-bottom-right-radius: 10px; | - |
The valid values of border-radius are described as follows:
Single value: indicates the corner radius of the four corners of the border.
Double value: indicates the corner radius of the two corners of the border. The first value indicates topLeft/bottomRight; the second value indicates topRight/bottomLeft.
Triple value: indicates the corner radius of the three corners of the border. The first value indicates topLeft; the second value indicates topRight/bottomLeft; and the third value indicates bottomRight.
Quad value: indicates the corner radius of the four corners of the border. The first value indicates topLeft; the second value indicates topRight; the third value indicates bottomRight; and the fourth value indicates bottomLeft.
Basic usage of borders
The following is an example of the use of the border.
div {
border-style:solid;
border-color:#ff0000;
border-width:10px;
border-radius:5px;
}When using the shorthand method of the attribute, the styles not written in the shorthand will be processed according to the default value. For example, the
border: 5px red;has no effect because border-style defaults to none, while theborder: 5px solid;will display a 5px solid black border because border-color defaults to black.If the shorthand and non-shorthand of an attribute exist at the same time, follow the principle that the latter overrides the former. Example:
// Display a 5px solid black border (black covers red)
border:5px red solid;
border-color:black;
// Display no border (none overrides dotted)
border-style:dotted;
border:5px red
Basic usage of the box model
The following is an example of the use of the box model.
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Example code
Click here detailBoxModel.zip for the complete example code.