Geek asks and answers

Quick simple CSS fields problem

I always thought that the basic theory behind CSS fields was very simple. A div with a 10px edge will create a 10px cushion around this element. When two divs are placed side by side, both with a 10px edge, this results in divs being 20px; both elements have a 10px margin, which results in a 20px distance between the elements. It seems right, and I always thought it was a fact.

HOWEVER, I recently discovered that if instead of two divs located side by side and placing one below the other, the border between these two elements now is only 10 pixels. What happened to the 10px mark issued by another div? Why is there no consistency between side by side and vertically stacked?

The indentation essentially says "don't put anything in x pixels of me." Under anything, does this include the fields of other elements? In the case of side by side the answer seems yes, the margin says: "Do not put anything, including your own margin, in x pixels of me." In the vertical direction, apparently this is the last?

Please, someone can clarify, so I can put him to bed and continue my evening :)

+5
source share
3 answers

This is due to the fact that they inlineeither inline-blockchange their property so that they stack next to each other without folding the fields together (which is normal, but unintuitive behavior).

http://jsfiddle.net/xeCZJ/3/

, display:block . inline-block, , , br .

.

+1

, display:inline , display:block , display:inline-block . jsFiddle, : http://jsfiddle.net/Z2nUN/4/

<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>

<hr />
<div class="allBlock">
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
</div>

<hr />
<div class="allInlineBlock">
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
</div>​


p{ margin:10px; background:#ccc; display:inline;}
.wideMargin{ margin:30px;}
.narrowMargin{ 0px; }
.allBlock p{ display:block;}
.allInlineBlock p{ display:inline-block;}​

. , .

EDIT: :

+1

, : CSS2.1 CSS3. block-progression, 'tb' ( → ). / . / , block-progression:lr block-progression:rl:

  • A B, , B - 'rl ' lr.
  • A B, , B - 'rl ' lr.

Unfortunately, block-progressionit is not in the latest working draft and is unlikely to be implemented by any browser. The CSS3 block module has not been updated since 2007, so it is not clear when you get a specific answer.

+1
source

More articles:


All Articles