[css-d] Why there is a space between two div
I don't understand, why there is a space between two div? There is no margin, no padding (besides body's 8px paddings). Why and how to get rid of them? http://jsfiddle.net/s8jyxsdr/2/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why there is a space between two div
Because they are inline-block, they adopt some of the properties of inline text: since there is white space between the divs in the HTML, it's also appearing in the rendered document. You could edit the HTML to remove the space (as seen here: http://jsfiddle.net/barney/d2zh48cy/) or use some of the more interesting techniques described in this article: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ On 13 Oct 2014 18:50, Артур Истомин art.is...@yandex.ru wrote: I don't understand, why there is a space between two div? There is no margin, no padding (besides body's 8px paddings). Why and how to get rid of them? http://jsfiddle.net/s8jyxsdr/2/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why there is a space between two div
2014-10-13 20:49, Артур Истомин wrote: I don't understand, why there is a space between two div? There is no margin, no padding (besides body's 8px paddings). Why and how to get rid of them? http://jsfiddle.net/s8jyxsdr/2/ You have two div elements set to have display: inline-block. An inline block is treated, loosely speaking, as a black box that acts like a letter in line layout. So the two elements are laid basically as if you had “A” and “B” on two lines, which is equivalent to “A B”. So there is whitespace between them, and this causes a word space, with a width equal to that of SPACE character in the current font (on the average, about 0.25em). To remove the space, remove the whitespace between the elements. In this case, replace div id=a/div div id=b/div by div id=a/divdiv id=b/div Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sizing for different viewers/devices
Good Day; I would like to size a body element so that it takes up about 20% of the viewport on a 22in monitor and takes up about 99% of the viewport on a cellphone. Look at http://www.drdelmath.com/study_aids/flash_cards/flash_card_presenter.html The idea is to control the size of the flash card program so that it looks kinda like a centered 3X5 card on large devices and uses all of the maximum available viewport on small devices. How best to achieve that with CSS? Here is my attempt: http://www.drdelmath.com/study_aids/flash_cards_revisons/flash_card_presenter.html PS: I know the program breaks easily. First I want to resolve the sizing issue then I will catch up to best practices. Thanks. Del __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sizing for different viewers/devices
On Mon, Oct 13, 2014 at 3:47 PM, Del Wegener d...@delweg.com wrote: Good Day; I would like to size a body element so that it takes up about 20% of the viewport on a 22in monitor and takes up about 99% of the viewport on a cellphone. Look at http://www.drdelmath.com/study_aids/flash_cards/flash_card_presenter.html Aside from having to deal with layout issues on a phone/small table as it is, you could have the flashcard's container have width: 95%; (or whatever you need) as a base style (mobile-first), then within a media query for your large widths, add a max-width: 600px; (or whatever you need). HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
