Talk about the understanding of CSS attribute margin
|
1.What is margin? Margin is used to control the spacing of the space around elements, achieving the purpose of space spacing visually. Has corresponding margin relative to the previous element. Used to separate elements. Always transparent. 2. The problem of merging outer margins (see w3school) --- Premise: The element is in the document flow 2.1 When two vertical margins meet, the margins overlap in the vertical direction, and the final margin is equal to the larger value of the two; 2.2 When an element (without borders and padding) contains another element, it will overlap vertically; 2.3 When an element is empty (without margins and), its margins will overlap 3. The difference between margin in block elements and inline elements Margin in block elements affects the top, bottom, left, and right of block elements and can be controlled at will; while in inline elements it only affects the elements in the horizontal direction. Note: For replaceable inline elements, such as img, input, textarea, select, button, label, etc., you can control their width and height and convert them into display: inline-block. Therefore, margin can also be controlled up, down, left, and right. 4. Common bugs related to margin 4.1 IE6 double margin problem Description: When the first element contained in the parent element is a floating element, the double margin problem will occur; Solution: display:inline 4.2 iIE6 floating element 3px spacing problem description: one floating element, the other is a non-floating element, there is a 3px spacing between the non-floating element and the floating element 5. The difference between padding and margin Padding is located inside the border and has the background color. It is mainly used to separate content from elements. Margin is located outside the border and does not have a background color. It is mainly used to distinguish elements from each other and plays an isolation role. 6. Negative margin problem of margin (to be continued) Using negative margins can solve many problems. References http://www.hicss.net/do-not-tell-me-you-understand-margin/ http://www.planabc.net/2007/03/18/css_attribute_margin/ |
<<: Detailed explanation of basic operation commands for Linux network settings
>>: Vue + element dynamic multiple headers and dynamic slots
Recommend
Implementation of CSS linear gradient concave rectangle transition effect
This article discusses the difficulties and ideas...
Nginx Location Configuration Tutorial from Scratch
Basics The matching order of location is "ma...
Comprehensive explanation of CocosCreator hot update
Table of contents Preface What is Hot Change Coco...
How the Linux kernel breaks into the process address space and modifies the process memory
Isolation of process address spaces is a notable ...
How to use skeleton screen in vue project
Nowadays, application development is basically se...
Solution to MySQL garbled code problem under Linux
The project interacts with the server, accesses t...
The concept of MySQL tablespace fragmentation and solutions to related problems
Table of contents background What is tablespace f...
WeChat applet records user movement trajectory
Table of contents Add Configuration json configur...
How to view the status of remote server files in Linux
As shown below: The test command determines wheth...
Solution to Vue data assignment problem
Let me summarize a problem that I have encountere...
Three implementation methods of Mysql copy table and grant analysis
How to quickly copy a table First, create a table...
Some references about colors in HTML
In HTML, colors are represented in two ways. One i...
How to upload projects to Code Cloud in Linux system
Create a new project test1 on Code Cloud Enter th...
Introduction to the use and advantages and disadvantages of MySQL triggers
Table of contents Preface 1. Trigger Overview 2. ...
How to connect SpringBoot to MySQL to get data and write to the backend interface
Table of contents 1. Create a new project 2. Add ...