Margin-Top nie działa dla elementu span?
Czy ktoś może mi powiedzieć, co źle zakodowałem? Wszystko działa, jedyną rzeczą jest to, że nie ma marginesu na górze.
HTML :
<div id="contact_us"> <!-- BEGIN CONTACT US -->
<span class="first_title">Contact</span>
<span class="second_title">Us</span>
<p class="content">For any questions whatsoever please contact us through the following e-mail address:</p></br></br>
<p class="e-mail">[email protected]</p></br></br></br></br>
<p class="read_more"><a href="underconstruction.html">Read More</a></p>
</div> <!-- END CONTACT US -->
CSS:
span.first_title {
margin-top: 20px;
margin-left: 12px;
font-weight: bold;
font-size: 24px;
color: #221461;
}
span.second_title {
margin-top: 20px;
font-weight: bold;
font-size: 24px;
color: #b8b2d4;
}
5 answers
div
, p
1 które są poziomem bloku elementami, które mogą zająć margin
ze wszystkich stron,span
2 nie można, ponieważ jest to Element Inline , który zajmuje tylko marginesy w poziomie.
Właściwości marginesu określają szerokość obszaru marginesu pola. Na właściwość "margin" określa margines dla wszystkich czterech stron, podczas gdy pozostałe właściwości marginesu ustawiają tylko swoje odpowiednie bok. Te właściwości mają zastosowanie do wszystkich elementów, ale marginesy pionowe nie będą miały każdy wpływ na nie wymieniane elementy liniowe.
Demo 1 (pionowe margin
nie stosowane jako span
jest elementem inline
)
Rozwiązanie? Stwórz swój span
element, display: inline-block;
lub display: block;
.
Sugeruje użycie display: inline-block;
tak, jak będzie inline
, jak również block
. Wykonanie go block
spowoduje, że twój element będzie renderował na innym Kolejka, jako block
elementy poziome zajmują 100%
poziomą przestrzeń na stronie, chyba że są wykonane inline-block
lub są floated
do left
lub right
.
1. Elementy poziomu bloku - źródło MDN
2. Inline Elements - MDN Resource
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-12 13:56:36
Wygląda na to, że przegapiłeś kilka opcji, spróbuj dodać:
position: relative;
top: 25px;
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-08-11 19:44:22
span
jest elementem inline, który nie obsługuje marginesów pionowych. Zamiast tego umieść margines na Zewnętrznej div
.
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
2014-10-17 05:20:53
span
element to display:inline;
domyślnie należy go utworzyć inline-block
lub block
Zmień swój CSS na taki
span.first_title {
margin-top: 20px;
margin-left: 12px;
font-weight: bold;
font-size:24px;
color: #221461;
/*The change*/
display:inline-block; /*or display:block;*/
}
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
2014-11-24 07:04:38
Zawsze pamiętaj o jednej rzeczy nie możemy zastosować marginesu pionowo do elementów inline, jeśli chcesz zastosować to zmień jego typ wyświetlania na block lub inline block.na przykład span{display: inline-block;}
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-03-16 16:11:00