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
How to make spaces have the same width in IE and FF?
body{font-size:12px; font-family:"宋体";}...
How to understand SELinux under Linux
Table of contents 1. Introduction to SELinux 2. B...
Design: A willful designer
<br />Years of professional art design educa...
An analysis of div+float, a very important concept in website design
In website construction, you will always encounter...
How to set up a deployment project under Linux system
1. Modify the firewall settings and open the corr...
Website redesign is a difficult task for every family
<br />Every family has its own problems, and...
Two query methods when the MySQL query field type is json
The table structure is as follows: id varchar(32)...
ffmpeg Chinese parameter description and usage examples
1. When ffmpeg pushes video files, the encoding f...
MySQL 8.0.16 installation and configuration tutorial under Windows 10
This article shares with you the graphic tutorial...
Summary of commonly used performance test scripts for VPS servers
Here is a common one-click performance test scrip...
Master-slave synchronous replication configuration of MySQL database under Linux
The advantage of the master-slave synchronization...
How to use Docker to limit container resources
Problem Peeping In the server, assuming that the ...
About using Keepalived to achieve automatic restart of Nginx and dual-active hot standby high availability
Table of contents 1. Overview 2. Use Keepalived t...
Example code for implementing large screen adaptation on PC using vue+px2rem (rem adaptation)
Configuration Preface Project construction: built...
Detailed Introduction to MySQL Innodb Index Mechanism
1. What is an index? An index is a data structure...