Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   От куда берутся отступы между div если margin:0 и padding:0? (https://javascript.ru/forum/xhtml-html-css/62094-ot-kuda-berutsya-otstupy-mezhdu-div-esli-margin-0-i-padding-0-a.html)

shurik_shink 24.03.2016 11:06

От куда берутся отступы между div если margin:0 и padding:0?
 
Чередуются 2 элемента div и между ними есть отступы, хотя padding:0 и margin:0

Подскажите: от куда берутся отступы между div.album и div.album_separator и как удалить эти отступы?

<style>
div#album_list{
	overflow-x: scroll;
	height: 225px;
	width: 800px;
	white-space: nowrap;
	background-color: red;
	border: 2px solid black;
	position: relative;
}
div.album{
	display: inline-block;
	background-color: blue;
	width: 200px; height: 200px;
	padding: 0px; margin: 0px; /*отступы по нулю*/
	border: none;
}
div.album_separator{
	display: inline-block;
	height: 200px; width: 20px;
	background-color: white;
	padding: 0px; margin: 0px;  /*отступы по нулю*/
	border: none;
}
</style>
<div id='album_list'>
<div class="album">1</div>
<div class="album_separator">&nbsp;</div>
<div class="album">&nbsp;</div>
<div class="album_separator">&nbsp;</div>
<div class="album">&nbsp;</div>
<div class="album_separator">&nbsp;</div>
<div class="album">&nbsp;</div>
<div class="album_separator">&nbsp;</div>
<div class="album">&nbsp;</div>
<div class="album_separator">&nbsp;</div>
</div>

destus 24.03.2016 11:26

shurik_shink,
Потому что inline-block и между ними
<div class="album">1</div>
<div class="album_separator">&nbsp;</div>

есть перенос строки. А удалить очень просто. Либо записать всё в одну строчку (код не читаем) либо так
<style>
div#album_list{
	overflow-x: scroll;
	height: 225px;
	width: 800px;
	white-space: nowrap;
	background-color: red;
	border: 2px solid black;
	position: relative;
}
div.album{
	display: inline-block;
	background-color: blue;
	width: 200px; height: 200px;
	border: none;
}
div.album_separator{
	display: inline-block;
	height: 200px; width: 20px;
	background-color: white;
	border: none;
}
</style>
<div id='album_list'>
<div class="album">1</div><!--
--><div class="album_separator">&nbsp;</div><!--
--><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div><!--
--><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div><!--
--><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div><!--
--><div class="album">&nbsp;</div><!--
--><div class="album_separator">&nbsp;</div>
</div>

shurik_shink 24.03.2016 12:29

Спасибо

laimas 24.03.2016 15:53

Цитата:

Сообщение от destus
<div class="album">1</div><!--
--><div class="album_separator">&nbsp;</div><!--

Тогда уж так:

<div class="album">1</div><div 
class="album_separator">&nbsp;</div><div
....

ruslan_mart 25.03.2016 07:47

font-size: 0 для родителя.


Часовой пояс GMT +3, время: 03:01.