Margin of CSS

Source: Internet
Author: User
Tags tidy

1. Suitable for normal block horizontal element without setting Width/height

2. Only available in horizontal direction dimensions

Example: Adaptive layout with a fixed width on one side

<HTML>  <Head>    <Metaname= "Generator"content= "HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <title></title>  </Head>  <Body>  <imgsrc= "1.png"width= "Max"style= "Float:left;"/>  <Pstyle= "margin-left:170px;">The level of salary gives us a sense of proportion to your skills and experience. After all, every time you look for a job interview, it's all about the candidate's skills, experience level, and then give a corresponding level, and finally determine a salary range. and generally have a formal wage system of companies, will be in accordance with the professional level of competency level, in order to correspond to different wage levels. This correspondence is a phenomenon that we can observe, and it has a personal experience. So it's intuitive to associate the salary level with our skill levels and experience values. I thought so for a long time in the early days of my work. As a result, after two or three years of work, skill levels have risen rapidly and experience values have soared, a period of early logarithmic growth in the two types of growth. The upward curve is particularly steep, and the increase in wages is at an early stage of exponential growth, with almost no growth, and self-perception that skills and experience have doubled, but wages seem to have risen by 20%. One of the exceptions is the school recruit, the school recruit just graduated students of the salary may be higher than the graduation work for two or three years of classmates, appear upside down phenomenon. This is more common in large companies, where the decision to pay the high and low, and experience and skills unrelated to the company's talent reserves, market competition, brand publicity. So, the intuitive relationship between salary and skill experience is just a representation, so what is the essence of it? Once read an article in Liu, which wrote: Wages are not used to pay for skills, do not think that the higher the skills, wages should naturally higher. Wages are used to pay the responsibility, the greater the responsibility, the higher the wages. The rise in wages is due to the greater responsibility assumed. What is said above is the essence of wages. Therefore, standing in the company's perspective, it will design a lot of different positions, there are management posts, a variety of professional series of posts, and each post corresponds to different responsibilities. And the job responsibility to the skills and experience of the requirements of the position of the salary range, also determines the entire company's human cost range. Figuring out the essence of the wage, we understand how the pay rise is going on. Pay rise, one is the job responsibility within the range of adjustment, after all, if long time does not rise, also is not conducive to the stability of personnel. The other is to upgrade to higher-level positions, which have risen in addition to the current salary, while the potential for a rising wage range has risen. So, sometimes your skills improve, but the company's business development is not so fast, can not provide a higher level of job responsibilities, wages will not rise up. Another misconception is that wages are related to my performance. Work very hard this year, performance is very good, the end of the company's performance is also very good, you will expect a rise in wages. But it's not up to you to say that wages are paid for. This typically rewards outstanding performance by sending bonuses, which are short-term incentives and, of course, companies that adjust their promotions to maintain long-term incentives within the job-responsibility wage range. For managerial positions, because managers do not belong to individual contributors, part of their salary is usually tied to team performance, called "Performance bonuses". This bonus is generally managedThe percentage of all compensation in the job will increase with the increase in salary, for example: high-level may account for 50%, and middle 20%-30%. Former Intel CEO Andy Grove said:</P>  </Body></HTML>

Margin and occupy size

1.block/inline-block are available

2. Unrelated to setting Width/height

3. Suitable for horizontal and vertical orientation

Example: achieving upper and lower left white

<HTML>  <Head>    <Metaname= "Generator"content= "HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <title></title>  </Head>  <Body>  <imgsrc= "1.png"style= "margin:50px 0;"/>  </Body></HTML>

3. Percent margin Calculation rule: The margin percentage of a normal element is calculated relative to the container width

The percent margin for absolute positioning is calculated relative to the width of the first positioned ancestor element (relative,absolute,fixed).

4.margin overlap Common characteristics

Block horizontal elements (not including float and absolute elements)

does not consider Writing-mode, only occurs in the vertical direction (Margin-top/margin-buttom)

Three scenarios with 5.margin overlap

Adjacent sibling elements

The first/last child element of the parent

Empty block Element

<HTML>  <Head>    <Metaname= "Generator"content= "HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <title></title>  </Head>  <Bodystyle= "Background-color:pink">    <Divclass= "Div"style= "background-color:red;margin:80px 0;">Dffgsdddddddddd</Div>    <Divclass= "Div2"style= "background-color:yellow;margin:80px 0;">Sdfffffffffff</Div>      </Body></HTML>

<HTML>  <Head>    <Metaname= "Generator"content= "HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <title></title>  </Head>  <Bodystyle= "Background-color:pink">    <Divclass= "Div"style= "background-color:red;">dffgsdddddddddd<Divclass= "Div2"style= "background-color:yellow;margin-top:80px;">Sdfffffffffff</Div>    </Div>  </Body></HTML>

<HTML>  <Head>    <Metaname= "Generator"content= "HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <title></title>  </Head>  <Bodystyle= "Background-color:pink">    <Divclass= "Div"style= "background-color:red;margin-top:80px;">dffgsdddddddddd<Divclass= "Div2"style= "Background-color:yellow;">Sdfffffffffff</Div>    </Div>  </Body></HTML>

<HTML>  <Head>    <Metaname= "Generator"content= "HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />    <title></title>  </Head>  <Bodystyle= "Background-color:pink">    <Divclass= "Div"style= "background-color:red;margin-top:80px;">dffgsdddddddddd<Divclass= "Div2"style= "background-color:yellow;margin-top:80px;">Sdfffffffffff</Div>    </Div>  </Body></HTML>

Overflow:hidden

border-top:5px

"Style="

. List {margin-top:15px; margin-buttom:15px;}

Good at using margin overlap

Margin for CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.