Menu
I understand the difference when it comes to divs.
But in svg:
<svg>
<rect display="block" id="svg_3" height="57" width="52" y="20" x="41" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<rect display="inline" id="svg_3" height="57" width="52" y="20" x="120" stroke-width="5" stroke="#000000" fill="#0000BB"/>
</svg>
Seems to produce the same result... ('none' hides the element tho) Here's the jsfiddle: https://jsfiddle.net/foreyez/3c7va377/
what's the difference, and what's the default value, inline or block?
761
Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
SVGs are inline elements – Martin Becker.
Block Elements occupy the full width irrespective of their sufficiency. Inline elements don't start in a new line. Block elements always start in a line. Inline elements allow other inline elements to sit behind.
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).
Any element styled with display: block is the polar opposite of display:inline. A block element starts on a new line and occupies the available width of its parent element or its specified width. As you can see, the block element starts on a new line. The HTML [p], [div ], as well as other elements listed here are block elements by default.
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values.
“display: inline” Property: This property is used to display an element as an inline element (like <span>). The height and width properties are not effected on display:inline; property. It allows only left and right side of margins, not top and bottom.
Inline-block elements have same behavior as block but without whole line break (other elements can be placed beside them) padding-top and padding-right also affects the inline element's display effect, causing some mess. @manuman94 No, it doesn't mean that. There are use cases for all the different display types.
Per the SVG specification
A value of display: none indicates that the given element and its children shall not be rendered directly (i.e., those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.
So everything except none is treated exactly the same.
SVG is not HTML, it has no concept of reflow (i.e. changes in the position of one element do not affect other elements apart from tspan and tref in text).
185
I searched for this because I have an svg in a page where the height of the surrounding element is 5px more than the actual height of the svg.
As far as I can see it does make a difference if you use display="none", display="block" or display="inline".
Just as an image there is space below a svg. Because they are, by default, inline-block elements (inline in some browsers). As such, they sit alongside text: the space that's visible under an svg is there for descenders on letters like 'p' and 'q'.
This can be seen by placing a svg within a div. If the svg is 24px. high, the div will have a height of (for instance) 29 px.
display="block" will prevent the svg to reserve that space, so the div wherein the svg is placed will have the same height.
32
In my practice, when I use <svg> tag -- browser (Google Chrome Version 80.0.3987.100 (Official Build) (64-bit)) interpret it as inline element by default. And it behaves as a standart inline element. If complines display: block css-property for it -- it behave as standart block element
If we make some research and fall into computed tab in the dev tools on any svg-child element then we'll see that it has the display inline property. Even if we'll set svg display: block the svg-child elements stay inline elements by default
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
