CSS padding and margins

(1) Padding

CSS padding property defines padding, that is, the blank area between the border and the content of the element. The
padding property accepts length values ​​or percentage values, but does not allow negative values

​​{unilateral padding properties}
can be expressed in sequence , you can also set the padding of each side in the order of top, right, bottom and left. Each side can use different units or percentage values: for example, h1 {padding: 10px 0.25cm 2px 20%;} is equivalent to
h1 {
  padding -top: 10px;
  padding-right: 0.25cm;
  padding-bottom: 2px;   padding -
  left: 20% ; width changes, they change too. (2) Margins The blank space surrounding the border of an element is the margin. Setting margins will make the text stand out against its own background. The padding is a deviation from the background of the text, leaving a high-level blank {CSS margin property} The margin property accepts any length unit, which can be pixels, inches, millimeters or em and the same as the setting of the padding, or you can follow the top right The order of bottom and left sets the margins of each side h1 {margin : 10px 0px 15px 5px;}==margin: top right bottom left {single-side margin properties}
















You can use the one-side-margin property to set a value for the margin on one side of an element
p {margin: 20px 20px 20px 20px; } is equivalent to
p {
  margin-top: 20px;
  margin-right: 20px;   margin
  -bottom: 20px;
-left: 20px;
  }

{value copy}
In the order of top right bottom left, CSS defines some rules that allow specifying less than 4 values ​​for the margin
① If the value of the left margin is missing, the value of the right margin is used
② If the value of the bottom margin is missing, use the value of the top margin
③ If the value of the right margin is missing, use the value of the top margin


Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326872307&siteId=291194637