Geek Answers Handbook

CSS box model (margins and indents) for vertical spacing between paragraphs

How to use CSS margin and padding for vertical spacing between paragraphs:

  • Is it possible to define the vertical space between paragraphs by padding and / or using margins?
  • If this can be done using either, which one is better or more normal?
  • Are you inclined to define non-zero margins and non-zero margins, and if so, how many of them?

An example of margins, indents and borders in theory explains the difference between margins and indentation: I ask how many of each of them to use in practice to make a normal, beautiful page.

Secondly, this markup is similar to the following ...

<p>Paragraph.</p> <ul> <li>List item.</li> <li>Another list item. <p>List paragraph.</p> </li> </ul>

If you want an equal vertical space between each paragraph and / or list item, then:

  • Could you define <ul> as having zero marker + padding?
  • Or does <ul> usually have a non-zero marker, which then will not have any effect, because this field will be minimized with the edge <li> inside it and the preceding <p> ?

Thirdly (and I'm not sure if I should ask this third question), the specification for folding fields says: "If the upper and lower fields of the box are adjacent, then it is possible that the fields can fall through it." If I have a blank paragraph similar to the next in the middle ...

 <p>Hello</p> <p></p> <p>World</p>

... then I expect to see this as an empty paragraph, that is, with an extra amount of vertical space between Hello and World :

  • What would prevent these empty paragraph margins from being reset, and therefore the empty paragraph would be invisible: is this a non-zero padding that does this?
  • In which scenario is it useful to have the field in contact with the upper and lower fields that are compressed?

Answers to any or all of these three questions will be welcome.

I am not particularly interested in box problems in IE, but I want to know how to use the standard.

+4
source share
4 answers

To answer your first question, it usually doesn’t matter if you use margin or padding to add a space between the elements, however, if you apply a border to the element and use padding to create a space, it will pop out the border that is far away.

To answer the second question, just take a look at this code and maybe play with it:

 <html> <head> <title>Box Model Tests</title> <style type="text/css"> /* Just to get rid of the annoying padding/margin setting that is default in most browsers on the body tag from messing up our experiments */ body{ margin: 0px; padding: 0px; } p{ margin: 0px; padding: 0px; } /* It appears that if you modify the ul padding it tends to remove the bullet points, that is if you set the paddign to zero */ ul{ margin: 0px; } </style> </head> <body> <p>Paragraph.</p> <ul> <li>List item.</li> <li>Another list item. <p>List paragraph.</p> </li> </ul> </body> </html>

Keep in mind that in the above example, all remaining space is associated with font properties that can be modified using the same methods as any other element.

And to the third:

I think garrow is right about the empty <p> I don’t encounter this problem because I often use <p> less and less in my layouts, however this article looked very interesting, and I think this is the best explanation. than W3C.

+3
source

To answer your third question;

The second <P> as an empty block level element simply will not be displayed.

You can force an element to be visualized while it is empty, giving it a height or padding, or including non-split space & nbsp; in the paragraph. (there are probably more ways to do this).
Regular spaces (like newlines, tabs, or spaces) don't seem to work in this regard.

Edit # 2 :: To correctly illustrate how all this works, save it locally and see what it does.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Page Title</title> <style type="text/css" media="screen"> p { margin:10px; background-color:#ccc;} p.padding { padding:5px; background-color:#eec; } p.height { height:30px; background-color:#cee; } </style> </head> <body> <p>text</p> <p class="padding">i have padding</p> <p class="padding"></p> <p></p> <p></p> <p></p> <p></p> <p>5 empty paragraphs before this, only one will render. (it has padding)</p> <p>& nbsp;</p> <p> </p> <p> </p> <p> </p> <p>3 whitespace before me, one will render, it has &amp;nbsp;</p> <p class="height">im 30 px high</p> <p class="height"></p> <p></p> <p></p> <p>3 empty before me, 1 will show (it has height)</p> <p>text</p> <p>text</p> </body> </html>
+2
source

Hehe, well ... web browsers are different, I would say that everything is fine with Firefox, as a rule, goes well with the standard, but this is not entirely true.

According to xhtml1-strict.dtd only <li / "> can be a child of <ul /">. I suggest you become a designer who knows about the standards. These are formal specifications with which you can test your HTML.

 <p>Paragraph.</p> <ul> <li>List item.</li> <li>Another list item. <p>List paragraph.</p> <!--illegal here--> </li> </ul>

But back to your question (which, by the way, is a pain to answer). There are many cases when you define a non-zero margin and complement. I prefer extra margin when padding is not needed, and then laying when margin is not working. Each situation is different, and you need to know when it is preferable.

I will not go into details because I think that you are on the right track. Keep experimenting, and I know that you get it. But keep in mind that web browsers do things differently.

I am not sure about this error, but a space is sometimes considered margin. If a bunch of elements occurs without a space between them, which sometimes differs from where there is no white space.

Again, this is a lot to accept, so I will not go into details, but you need to know about these things, and you will get this knowledge by practicing.

Paragraph and list fields by default are not the same cross-browsers, when you start doing all these layouts, you want to define a set of basic CSS rules for your page. And if you need help regarding which fields, I suggest you take a look at the canons of page construction .

 p { margin: 1em 0; } ul { margin: 1em 0; } ul > li { margin: 1em 0; }

The above rules are just an example, but they do what they ensure that the top and bottom margins for paragraphs and list items are the same, despite the browser. Such things make your page look like a cross browser.

Keep checking things out and read the excellent CSS blogs there. Ask for help when you come across really obscure edge cases. These people spent a lot of time deciding, and your time is better spent learning how they did it than reinventing the wheel.

0
source

The main thing you need to know is that adjacent (vertical) fields are just like that if you have:

 p { margin: 1em 0; } ... <p>Paragraph one</p> <p>Paragraph two</p>

The space between them will be 1em not 2em.

Separate gasket. If paragraphs were padded, this would be inside their boxes. The source of truth for all these things is the W3C CSS standard. For example, folding fields :

In this specification, the expression for folding fields means that adjacent fields (without filling or border areas separate them) from two or more boxes (which can be next to one another or nested) are combined to form a single stock.

In CSS2, horizontal margins will never collapse.

Vertical fields can collapse between certain fields:

  • Two or more adjacent vertical fields of block blocks in a normal flow flow. The resulting margin width is the maximum adjacent width of the field. In the case of negative margins, the absolute maximum negative adjacent fields are subtracted from the maximum positive adjacent fields. If there are no positive fields, the absolute maximum of negative adjacent fields is subtracted from zero.
  • The vertical fields between a floating field and any other field are not Decay.
  • Fields absolutely and relatively positioned boxes do not collapse.

Refer to margin examples, filling and borders for an illustration of folded fields.

Borders are slightly different, especially in tables , where they can collapse into each other or are not dependent on CSS.

Now the story does not end, of course. Browsers can vary depending on how they calculate combinations of width, margins, borders and indents, but which are greatly reduced due to the fact that browsers in standard mode (with DOCTYPE) and a large theme in their own right (as is done for minimize these types of problems).

0
source

More articles:


All Articles