Block-level elements have a width width and inline elements do not, so you can only verify the difference on block-level elements
Set the current box model to IE box model
Set the children element margin to 0
If you set the children element margin: 0, then there is no difference between them
Margin: 0 30px for the children element
If you set the children element margin: 0 30px, width: 100% will remain the same and the position will be shifted 30px to the left; Width = parent element width – left margin – right margin, and offset 30px to the left
Margin: 0-30px for the children element
Margin: 0-30px; width: 100%; position: -30px; Width = parent element width – left margin – right margin, and offset to the left by 30px, and to the left by -30px;
Width: auto can be combined with display: flex to achieve the following layout
Children set display: flex and margin: 0-30px, red block set Flex-grow: 1 and margin: 0 30px to look like this, spaced 60px apart
After adding overflow: Hidden to the parent element
