margin and padding What does that mean?

margin Margin ,padding padding , The outer margin represents the distance between the edge of an element and its adjacent elements , The inner margin represents the distance between the content and the border of the element .

font:12px/1.5 What do you mean ?

among 12px/1.5 Express : Text size 12 Pixels , Row height 1.5 times , That is to say 150%

margin How to set

You can refer to :

margin Shorthand property sets all outer margin properties in one declaration . The four attributes are clockwise , On the lower left

such as :

margin:10px 5px 15px 20px

The top margin is 10px

The right margin is 5px

The bottom margin is 15px

The left margin is 20px


It also allows you to set only two values to represent four values , When you set two values , The first value represents the top margin and the bottom margin , The second value represents the left margin and the right margin . such as :

margin:10px 5px

The top margin is 10px

The right margin is 5px

The bottom margin is 10px

The left margin is 5px


margin The other thing you can set is auto value ,auto The value is set by the browser itself , such as

You can use :margin:0 auto

Juzuo can use :margin:0 auto 0 0

You can use :margin:0 0 0 auto

display:inline/block What does that mean?

for div and span Elements, for example ,div Is a block level element , and span Is an inline element , That is to say , Assuming there are no other settings , Two div The elements will be up and down , Two span Elements will be left and right typesetting relations

And if you want to change div For inline mode , Then we need to use display attribute

Inline example :

Block level examples :

float What does that mean?

It means floating , This property is used for layout , For example, the following figure

How to design ?

It is divided into two active blocks , The block on the left is banner chart , The block on the right is a text introduction and buttons . So suppose the father div If it's the whole display , We see the one on the left banner Graph distance from father div There's a certain distance in the left box , The one on the right is also a certain distance .

There is a problem in realizing this, which is these two div It should be inline , But the inline elements are margin Attributes don't work . So to make inline elements work, you need to set float attribute .

There are probably three ways to do this :

1 Father div Set in padding, And then the one on the left banner Of div And the text on the right div Set separately float Left and right

2 Father div Do not set padding, And then the one on the left banner Of div Set up float At the same time, set margin. But at this point , stay IE6,7 In this case, there will be the problem of bilateral distance , So you need to set display:inline.

3 Father div Do not set padding, And then the one on the left banner Of div Put it in another div Inside , And this div Set up float, And then it's a little bit div I'm doing it again margin The operation of .

Reference article :

Commonly used CSS Summary of abbreviation grammar

font:12px/1.5 What do you mean ?

css More articles about knowledge

  1. CSS Knowledge review -- read 《CSS Those things 》 note

    Because I've known about it before CSS Knowledge about , With a certain foundation , So read <CSS Those things > It's not very difficult , Besides, when I read it now ,CSS3 and HTML5 More popular , Here's just a record of CSS Knowledge record , Don't go into details , ...

  2. You should learn something HTML/CSS Knowledgeable 9 Dali by

    Everyone should learn to write code —— This view is just overwhelming to our eyes . Maybe you don't know , Programmers should learn code , But as a writer . Marketer . Financial workers, even workers , Why do you need to learn code as well ? ok , Now I'll tell you ...

  3. WEBBASE piece : Chapter five , CSS knowledge 3

    CSS knowledge 3 Frame model : One , Margin ( Above, ) Two , padding    1, What is inside margin ? The inner margin is the distance between the content and the edge of the element : notes : The inner margin enlarges the area within the element's border grammar : padding: In four directions ...

  4. WEBBASE piece : Fourth articles , CSS knowledge 2

    CSS knowledge 2 One , Size And Frame CSS Company 1, Unit of measure :(1)px Pixels   (2)%   (3) in Inch   lin = 2.54cm (4)pt pounds 1pt = 1/72in    ppi ...

  5. WEBBASE piece : Third articles , CSS knowledge 1

    Third articles , CSS knowledge 1 One ,CSS Introduce CSS: Cascading Style Sheets --- Style sheets HTML: Build a web page structure : CSS: Beautify the webpage on the basis of webpage structure : Two ,CSS Use ...

  6. 《HTML And CSS knowledge 》 Series sharing column

    Collection HTML and CSS Technical articles on , As a WEB developer , You have to know HTML and CSS Knowledge of , Even as a background developer, you should know some common HTML and CSS knowledge , Even architects need to understand , Only in this way can we develop a practical website ...

  7. Web How to learn the front end basics ? JavaScript、html、css Knowledge architecture

    In the past, developers only needed to master HTML.CSS.JavaScript The troika can do a front-end job . Now in addition to ordinary coding , Also consider how to optimize performance , How to cross ends . Cross platform implementation , In especial AI.5G The advent of Technology , ...

  8. css Knowledge summary

    ---#  Learning goals :> 1. Learn how to use CSS Selectors > 2. Memorization CSS Style and appearance properties > 3. Have a good command of CSS All kinds of selectors > 4. Have a good command of CSS All kinds of selectors > 5. Have a good command of ...

  9. My collection of technical knowledge maps ( Each is a big picture ) About XX The knowledge behind 、 Technical drawings , for example :Linux、Nginx framework 、PHP Knowledge card 、 The opportunity to 、HTML5 Move 、Android System architecture 、YII Typical process of Architecture 、Css Knowledge table

    My collection of technical knowledge maps ( Each is a big picture ) HTML5Linux/Unix Reading notes of system design idea  LinuxMVCJava Threads MVCSpring MVCCSS3Nginx framework VimCliCommandsPHP know ...

  10. Web page production commonly used CSS knowledge

    In making a web page , We're going to use a lot of CSS Knowledge , Here I briefly summarize some . div     Divide into blocks ul,li Unordered list ( Cooperate with the division of blocks ) ol,li Ordered list a Hyperlink label p Paragraph Tags h Title Tag i ...

Random recommendation

  1. SQL Server Remove duplicate data from

    delete from A ) )

  2. ios Medium addChildViewController and android Medium fragment

    Just now I suddenly felt that 2 It's something that functions like , Make a note of , To study !

  3. [ turn ]ASP.NET MVC Json() Solutions for handling big data exceptions json maxjsonlength

    In this paper, from : Let's give a brief introduction to the project : The whole project uses Microsoft's ASP.NET MVC3 Development ...

  4. Python Learning notes (4): Custom time class

    Python I just can't take it , It's too hard to use. . I think C# Time is perfect , Simple . To use . therefore , Customize your own time class : usage : A little app , I need to take out the minutes of trading in the stock market every day , It started like this : A little improvement , ...

  5. Requirejs2.0 note

    API RequireJS plug-in unit ①require.js Asynchronous loading of scripts ...

  6. Solve the problem of data conversion to DBNULL The problem of

    if (string.IsNullOrEmpty(CookieHelper.GetCookie("DEPID", "theway").ToString()) = ...

  7. 3D Matrix rotation

    Pictured , It's going to take a little bit of ( vector ) v(x, y, 0) Around the z Shaft rotation angle  θ, Find the rotated point ( vector ) v'(x', y', 0). General idea : 1. take v(x, y, 0) decompose , v(x, y, 0) = ...

  8. [Jquery] Jquery Get the code of browser width and height

    <script type="text/javascript"> $(document).ready(function() { alert($(window).heigh ...

  9. SQL Server By combining one table with another Batch update the fields of this table

    UPDATE OutPzPersonSet SET cPerson = a.AAA --SELECT * FROM OutPzPersonSet d INNER JOIN AAAA a ON ...

  10. [Go Language learning ] One of : Set up unit test environment

    Recently started formal study Go Language , Follow my steps and principles of learning a new technology ( note + unit testing + demo ). First of all, I learned the configuration of the development environment , And immediately set up a unit test environment , So you can take notes , While testing and learning , thus ...