A span element does not accept bottom and top margin being an inline element but an SVG does. How it is possible? Are they rendered as inline-block elements by browsers?
Related
I'm trying to understand text-align but it seems it acts with different rules based on what type of element it is applied to and where it is applied from, whether a parent or a child element.
To my knowledge, if I apply text-align:center to a div, then all of the containing elements will have a text-align:center property as well.
If I apply text-align:center on an inline element like an image, nothing will happen because the image has no surrounding space that is part of the element. I have this code and I have no idea why it behaves the way it does. What I'm trying to achieve is to simply center an image horizontally within a header tag and I achieve it this way:
body {
margin: 0;
}
header {
background-color: black;
height: 100px;
text-align: center;
}
img {
height: 100%;
}
<body>
<header>
<img src="logo.png" alt="Logo image">
</header>
</body>
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen? Isn't the image supposed to be aligned within its own space, and since there is none, it shouldn't work? I thought that saying text-align:center in a div would be like typing it for each one of the containing elements as property so it was just a quicker way of doing it. But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
If I have a header with an image inside, isn't saying:
header{
text-align:center;
}
the same as saying:
img{
text-align:center
}
because the child elements get applied the parent property to them as well? I thought text-align would only act on the child elements of the element it is used on. but then why doesn't it work if I declare it on the image?
Even, though I tried to set the image to display:block and set text-align:center on it, this time I was sure it would work, but it didn't. Why?
If I use text-align:center on a p element, which is a block element, the element is centered within its own space, shouldn't that happen too for images that are set to display:block?
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen?
Images are, by default, display: inline, which causes them to be treated (more-or-less) the same way as a character of text.
But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
text-align describes how the inline content of the element should be aligned within the element.
An img element has no content.
If I use text-align:center on a p element, which is a block element, the element is centered within its own space
No, it isn't. The text inside the paragraph is centred. The alignment of the paragraph itself is unaffected (by default a p element is with: auto so will completely fill the available horizontal space after margins, borders and padding are accounted for).
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
In the following snippet, header is a block level element. img is an inline level element. And so the image is horizontally aligned to the center of the parent block level element.
header{
text-align:center;
}
<header>
<img src="https://placekitten.com/100/100" alt="kitten" />
</header>
Is the following snippet the same as the above? No. Because text-align:center is not applied to a block level element that contains inline-level content.
img {
text-align: center
}
<img src="https://placekitten.com/100/100" alt="kitten" />
I am trying to inline a Bootstrap 4 carousel with another inline-block element (represented by an <img> element here). But whenever I put them side-to-side, the carousel element gets shifted upwards by 50% its height. How can I have them perfectly side-by-side?
Repro JSFiddle: https://jsfiddle.net/yok78wrt/2/
Use vertical-align:top;
The vertical-align property in CSS controls how elements set next to
each other on a line are lined up.
The working jsfiddle:
https://jsfiddle.net/y5a0b18s/
The valid values are:
baseline - This is the default value. top - Align the top of the
element and its descendants with the top of the entire line. bottom -
Align the bottom of the element and its descendants with the bottom of
the entire line. middle - Aligns the middle of the element with the
middle of lowercase letters in the parent. text-top - Aligns the top
of the element with the top of the parent element's font. text-bottom -
Aligns the bottom of the element with the bottom of the parent
element's font. sub - Aligns the baseline of the element with the
subscript-baseline of its parent. Like where a would sit. super
- Aligns the baseline of the element with the superscript-baseline of its parent. Like where a would sit. length - Aligns the baseline
of the element at the given length above the baseline of its parent.
(e.g. px, %, em, rem, etc.)
Go to inspect element and you will get that tag has a property vertical-align: middle. That's why your image is not aligned side by side.
You can add a custom class to your css file and like that
<img class="image-position" src="https://loremflickr.com/200/200">
and in the css file you need to write:
.image-position {
vertical-align: top;
border-style: none;
}
after doing that the image and the slider will be side by side as you want.
Why does text-align: center headers?
Headers are block elements h1,h2,etc. Why is it that text-align centers headers even though the documentation specifically says it does not: Docs on text-align
This property describes how inline-level content of a block container
is aligned.
I'm a little confused as to why it wont center a block element like a div, but willing to center a header. Could it potentially be because text inside a header is inline, but the actual header itself is a block element?
http://codepen.io/stephenhuh/pen/KrkLZG - codepen on this phenomenon.
* {
text-align: center;
}
.box {
background-color: blue;
width: 150px;
height: 150px;
}
From CSS 2:
Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.
Like everyone else has already explained, it is centering the text content inside the header element. I'd just like to add that you can easily test this by adding a border or background to elements. If you do this, you'll notice that the header will span the entire width of its container by being a block element, and the text will only be centered inside that block.
(Alternatively, you could use an inspector to show the actual space an element is occupying)
The property text-align affects specific children of the parent that the property was assigned; namely inline type children. Text is inline, as well as spans and inputs unless otherwise overridden by CSS. If you need to center a block level element (horizontally) use margin:0 auto;.
In the fiddle - http://jsfiddle.net/dddaaLwL/ you can see that horizontal margins have an effect on the inline elements. and vertical margins do not have an effect. Is this right? why so?
#s1 {
margin-left: 40px;
}
#s2 {
margin-top: 40px;
}
Yes your fiddle is correct. why?
An inline element occupies only the space bounded by the tags that
define the inline element.
More info HERE
Examples of Inline Elements:
<a>,<span>,<b>,<em>,<i>,<cite>,<mark>, and <code>
More about Inline Elements
An inline element has, but may not be limited to, the following characteristics:
Flows along with text content, thus
Will not clear previous content to drop to the next line like block
elements Is subject to white-space settings in CSS
Will ignore top and bottom margin settings, but will apply left and
right margins, and any padding
Will ignore the width and height properties
If floated left or right, will automatically become a block-level
element, subject to all block characteristics
Is subject to the vertical-align property
More info HERE
Actually, vertical margins do have an effect on inline elements, but because the element above it isn't a block, it's actually using the margin from the top of the page instead of the previous element. Let's take a quick look at the box model:
Because inline elements don't handle bounding in the same way that block type elements do. They can only hold data, and other inline elements, and they follow the constraints of the parent element, and only exert influence over their individual space.
However, if they were inline-block elements, you'd see a different result:
As you can see, inline-block elements can actually influence the behaviour of other elements, whereas inline elements do not.
See Also:
MDN Documentation on Inline Elements
MDN Documentation on Block-level Elements
Have a look at below jsfiddle
#s1 {
margin-left: 40px;
}
#s2 {
margin-top: 100px;
}
<span id="s1"> span 1 </span>
<br>
<br>
<span id="s2"> span 2 </span>
<p id="s2"> p 3 </p>
p and div elements are block level elements where span is an inline element and hence margin on span wont work.
This question already has an answer here:
css - inline elements ignoring line-height
(1 answer)
Closed 8 years ago.
I've only just realised that anchor tags with a background will only inherit their line-height and you can only set it directly by setting the anchor to display: inline-block;
Why is this?
http://jsfiddle.net/moefinley/3H3y5/
ul li a {
display: inline-block;
line-height: 20px;
}
Here is root cause :
content-area = in non-replaced elements, the box described by the font-size of each character in the element, strung together; in
replaced elements, the intrinsic height of the element plus any
margins, borders, or padding
inline box = the addition of (half-)leading to the content-area for each element; for non-replaced elements, the height of the inline
box of an element will be exactly equal to the value for line-height;
for replaced elements, the height of the inline box of an element will
be exactly equal to the intrinsic height of the element plus any
margins, borders, or padding
line-box = the box which bounds the highest and lowest points of the inline boxes which are part of the line
The following behaviors fall out of this description:
the background of an inline element is applied to the content-area
plus any padding
margins and borders on replaced elements affect the height of the
inline box for that element, and by implication the height of the
line-box for that line
So your line-height for a with background works fine only when you mark it as block element using inline-block. And with default behavior it will just stretch the line height without stretching background.