Margin-Top not working for span element?
Unlike div
, p
1 which are Block Level elements which can take up margin
on all sides,span
2 cannot as it's an Inline element which takes up margins horizontally only.
From the specification:
Margin properties specify the width of the margin area of a box. The
'margin' shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These
properties apply to all elements, but vertical margins will not have
any effect on non-replaced inline elements.
Demo 1 (Vertical margin
not applied as span
is an inline
element)
Solution? Make your span
element, display: inline-block;
or display: block;
.
Demo 2
Would suggest you to use display: inline-block;
as it will be inline
as well as block
. Making it block
only will result in your element to render on another line, as block
level elements take 100%
of horizontal space on the page, unless they are made inline-block
or they are floated
to left
or right
.
1. Block Level Elements - MDN Source
2. Inline Elements - MDN Resource
How to set different margin-top for span elements?
You need to put vertical-align: top
. By default inline-block
elements will sink to the level of their siblings.
Margin-top/Margin-bottom not working
That's because span
is an inline element, and margin-top/bottom
doesn't work in inline elements, so make it a inline-level block container element.
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
body {
font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
background-color: #f0f0f0;
}
span.bigger {
display: inline-block;
font-size: 1.5em;
margin:10px;
background-color: white;
padding: 5px;
}
<div id="content">
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
<span class="bigger">Text-Text-Text</span>
</div>
No margin
Margin top of first span not working
The issue you are facing, is called collapsed margin, hence either you can use position: relative;
with top
set to 10px
or use overflow: auto;
on the parent element.
Demo (Using overflow: auto;
)
Demo 2 (Using position: relative;
+ top: 10px;
and top: 20px;
)
position: relative;
method will require you to set the top
separately as it will move your element, though it physically reserves the space, hence you will have to double up for the second one..
padding not working in span tag
2 things to fix:
you were applying the CSS to
span
of an ID selector, but you were using aspan
with an ID selector in your HTML.span
won't havepadding
because it is an inline element by default, so setinline-block
orblock
Snippet
#beforeImage { padding: 40px; display: inline-block; /* or block */ /* demo */ background: red }
<span id="beforeImage">Foo bar</span>
How to use margin top between input and span
Use your span as a block so the margin will be applied
span{
display: block;
margin-top: 3px;
}
Margin-top value not being applied
Replace <container>
by a <div>
and your margin can apply. The reason is as <container>
is not a valid HTML markup, the browser do not know how to display it and ignores it.
<div class="universal-header">
<div class="header-top">
<div class="social-media">
<i class="fab fa-youtube-square" style="font-size: 2.5rem"></i>
<i class="fab fa-instagram" style="font-size: 2.5rem"></i>
<i class="fab fa-facebook" style="font-size: 2.5rem"></i>
<i class="fab fa-pinterest" style="font-size: 2.5rem"></i>
<i class="fab fa-twitter-square" style="font-size: 2.5rem"></i>
</div>
<nav>
<a href="#">Home</a>
<a href="#">Stories</a>
<a href="#">Travel Resources</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Shop</a>
</nav>
</div>
<h1>Black Diasporer</h1>
</div>
Custom HTML elements in browser are handled as web components, and I guess this it not what you were trying to do.
Related Topics
Css @Media Print Issues With Background-Color;
Cannot Change Font Size of Text Field in Material Ui
Does Height and Width Not Apply to Span
How to Override Default Primefaces CSS With Custom Styles
What's So Bad About In-Line Css
How to Apply Multiple Transforms in Css
What's the Difference Between Scss and Sass
Make Div Stay At Bottom of Page'S Content All the Time Even When There Are Scrollbars
What's the Difference Between Display:Inline-Flex and Display:Flex
Angular 5 - Failed to Load Resource: the Server Responded With a Status of 404 (Not Found)
Is Float For Layout Bad? What Should Be Used in Its Place
Fill Remaining Vertical Space With CSS Using Display:Flex
Border Gradient With Border Radius
Css - Why Doesn't Percentage Height Work