Dlaczego istnieje niewytłumaczalna luka między tymi elementami div w bloku liniowym? [duplikat]
Mam dwa elementy inline-block div, które są takie same, umieszczone obok siebie. Wydaje się jednak, że pomiędzy dwoma div-ami istnieje tajemnicza przestrzeń 4 pikseli, mimo że margines jest ustawiony na 0. Nie ma rodzic div wpływających na nich-co się dzieje?
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
Tak ma wyglądać:
6 answers
W tym przypadku, twoje div elementy zostały zmienione z block elementy poziomu na inline elementy. Typową cechą elementów inline jest to, że respektują one białe znaki w znacznikach. To wyjaśnia, dlaczego pomiędzy elementami powstaje Luka przestrzeni. (przykład)
Istnieje kilka rozwiązań, które można wykorzystać do rozwiązania tego problemu.
Metoda 1-Usuń białe znaki ze znaczników
Przykład 1 - Komentarz the whitespace out: (przykład)
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
Przykład 2 - Usuń podziały linii: (przykład)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Przykład 3 - Zamknij część znacznika w następnej linii (przykład)
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
Przykład 4 - Zamknij cały znacznik w następnej linii: (przykład)
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
Metoda 2-Reset font-size
Od białej spacji pomiędzy inline elements jest określony przez font-size, można po prostu zresetować font-size na 0, a tym samym usunąć odstęp między elementami.
Po prostu ustaw font-size: 0 na elementach nadrzędnych, a następnie zadeklaruj nowy font-size dla elementów podrzędnych. To działa, jak pokazano tutaj (przykład)
#parent {
font-size: 0;
}
#child {
font-size: 16px;
}
Ta metoda działa całkiem dobrze, ponieważ nie wymaga zmiany znaczników; jednak nie działa, jeśli element potomny font-size jest zadeklarowany za pomocą jednostek em. I dlatego zaleca usunięcie białych znaków ze znaczników lub alternatywnie floating the elements a tym samym unikanie przestrzeni generowanej przez inline elementy.
Metoda 3-Ustaw element nadrzędny na display: flex
W niektórych przypadkach można również ustawić display elementu nadrzędnego na flex. (przykład)
To skutecznie usuwa spacje między elementami w obsługiwanych przeglądarkach . Nie zapomnij dodać odpowiednie prefiksy dostawcy dla dodatkowego wsparcia.
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}<div class="parent">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>Uwagi stron:
Jest niewiarygodnie zawodne używanie marginesów ujemnych do usuwania przestrzeni między elementami inline. Proszę nie stosować marginesów ujemnych, jeśli istnieją inne, bardziej optymalne rozwiązania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-12 18:29:41
Użycie inline-block pozwala na użycie białej spacji w Twoim HTML, zwykle jest to równoznaczne z .25em (lub 4px).
Możesz skomentować białą spację lub, bardziej powszechnym rozwiązaniem, ustawić rodzica font-size na 0 i zresetować go z powrotem do wymaganego rozmiaru na elementach bloku wbudowanego.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-26 14:12:42
Najłatwiej naprawić tylko float kontener. (np. float: left;) z drugiej strony, każdy id powinien być unikalny, co oznacza, że nie można użyć tego samego id dwa razy w tym samym HTML dokumencie. Zamiast tego powinieneś używać klas, gdzie możesz użyć tej samej class dla wielu elementów.
.container {
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-07 18:25:37
Znalazłem rozwiązanie nie obejmujące Flex, ponieważ Flex nie działa w starszych przeglądarkach. Przykład:
.container {
display:block;
position:relative;
height:150px;
width:1024px;
margin:0 auto;
padding:0px;
border:0px;
background:#ececec;
margin-bottom:10px;
text-align:justify;
box-sizing:border-box;
white-space:nowrap;
font-size:0pt;
letter-spacing:-1em;
}
.cols {
display:inline-block;
position:relative;
width:32%;
height:100%;
margin:0 auto;
margin-right:2%;
border:0px;
background:lightgreen;
box-sizing:border-box;
padding:10px;
font-size:10pt;
letter-spacing:normal;
}
.cols:last-child {
margin-right:0;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-21 14:10:56
Po prostu dodaj border: 2px solid #e60000; do drugiego znacznika div CSS.
Zdecydowanie działa
#Div2Id {
border: 2px solid #e60000; --> color is your preference
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-19 08:26:06
Musisz dodać
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
margin-right:-4px;
}
Ponieważ ilekroć piszesz display:inline-block potrzeba dodatkowego margin-right:4px. Więc musisz go usunąć.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-26 06:50:09