1. Frame model

To better handle the relationship between element content, inner margins, borders, and margins, CSS defines a box model to represent the relationship between them

The following picture is the most intuitive display of the box model, very important, a lot of time to deal with style problems are used

There are three related attributes: padding, border, and margin.

In addition, there are two properties that set the width and height of the content area: width and height

So let’s get a sense of what these properties look like, and you can try to change the parameters and see what happens, right

<! DOCTYPEHTML>
<html>
<head>
    <style>
        div {
            width: 120px; /* Sets the width of the content area */
            height: 80px; /* Sets the height of the content area */
            color: yellow; /* Set the font color */
            background-color: cornflowerblue; /* Sets the background color */
            border: 5px solid deeppink; /* Sets the border */
            padding: 10px; /* Sets the inner margin */
            margin: 20px; /* Set the margin */
        }
    </style>
</head>
<body>
    <div>This is a div</div>
    <div>Here's another one</div>
</body>
</html>
Copy the code

2. Inside margin

The padding property defines the inner margin of the element, which can be a length value or a percentage value calculated relative to the width property of the parent element

In general, we need to specify four values that correspond to up, right, down, and left margins

However, CSS provides a special mechanism that allows us to handle assignments more flexibly and conveniently. The rules are as follows:

  • If the left value is missing, the right value is used instead
  • If the lower value is missing, the upper value is used instead
  • If the right-hand value is missing, the upper value is used instead

Let’s rephrase it visually:

  • If four values are provided, they are set in the order of up, right, down, and left
  • If three values are provided, the first value is set to top, the second value is set to left and right, and the third value is set to bottom
  • If two values are provided, the first value is set to top and bottom, and the second value is set to left and right;
  • If one value is provided, it is used to set up, right, down, and left directions simultaneously

CSS also provides properties that individually set a direction:

  • Padding-top: Sets the top inner margin
  • Padding-right: Sets the right inner margin
  • Padding-bottom: Sets the inner margin
  • Padding-left: Sets the left inner margin
<! DOCTYPEHTML>
<html>
<body>
    <input type="text" placeholder="Without an inside margin.">
    <input type="text" placeholder="With an inside margin set." style="padding: 2px 4px">
</body>
</html>
Copy the code

3, border

(1) width

The border width can be set using the border-width property, which has the following optional values:

  • Thin: thin border
  • Medium: The default value, medium border
  • Thick: thick border
  • The length of the value
  • Inherit: Inherit from the parent element

(2) Style

You can set the border style using the border-style attribute, which has the following optional values:

  • None: no border
  • Hidden: Normally has the same effect as None, but can be used to resolve border conflicts when applied to a table
  • Dotted frame
  • Bootstrap: dashed border
  • Solid: solid border
  • Double: double border
  • Groove: groove frame
  • Ridge: Ridge border
  • Inset: concave border
  • Outset: outside convex frame
  • Inherit: Inherit from the parent element

(3) Color

The border color can be set using the border-color attribute, which has the following optional values:

  • Color name, for examplesnow
  • Hex color, for example#FFFAFA
  • RGB colors, for exampleRGB (255250250).
  • Transparent: the default value is transparent
  • Inherit: Inherit from the parent element

(4) Attribute shorthand

Using the border abbreviation allows us to set all border attributes in one declaration, in the following order:

  • border-width
  • border-style
  • border-color
<! DOCTYPEHTML>
<html>
    <style>
        div {
            width: 300px;
            height: 100px;
            color: MediumSlateBlue;
            text-align: center; /* Text level center */
            line-height: 100px; /* Text is vertically centered */
            background-color: LightSkyBlue;
            border: 10px solid SkyBlue;
        }
    </style>
<body>
    <div>August in Provence, the season of lavender</div>
</body>
</html>
Copy the code

(5) rounded corner frame

You can use the border-radius attribute to create a rounded border, which takes a length value as a parameter

<! DOCTYPEHTML>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #dddddd;
            border: 2px solid #a1a1a1;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div>Hello World</div>
</body>
</html>
Copy the code

4. Margins

The margin attribute defines the margin of the element and accepts a length and percentage value. You can also use auto to indicate that the browser calculates the margin automatically

<! DOCTYPEHTML>
<html>
<head>
    <style>
        .div1 {
            width: 300px;
            height: 100px;
            background-color: Seashell;
            margin-left: 10px;
            margin-bottom: 15px;
        }
        .div2 {
            width: 300px;
            height: 100px;
            background-color: Honeydew;
            margin-left: 50px;
            margin-top: 45px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>
Copy the code

Note that there is a small detail here, which is that when two elements have overlapping margins, they are merged as follows:

  • If both margins are positive, take the larger one between them
  • If both margins are negative, take the one with the highest absolute value between them
  • If two margins are positive and negative, take the sum of them