Code Sandbox
<h1>KUROMI</h1>
<p>Kuromi (クロミ) is a rabbit character from the world-renowned Japanese company Sanrio. She is described as a small white-furred chibi anthropomorphic rabbit with a spade tail, jester hat with a pink skull clip at the center of her forehead, narrowed black eyes, and a pink nose. The skull's facial expression changes to match Kuromi's mood.</p>
<p>Kuromi is also a part of the My Melody universe. She is the self-proclaimed <span>Doppelgänger</span> rival of My Melody, and, while she may look tough, she is actually very girly and is attracted to good-looking guys. Kuromi is known for her unique, contrasting yet similar appearance and "naughty" personality compared to My Melody (which explains her signature "angry" eyes). Her favorite colors are black and hot pink. Her favorite foods are shallots, all kinds of meat, and in recent Kuromi merchandise, cherries have been shown.</p>
<a>Learn more about Kuromi's full story on Fandom</a>
<p>During her debut in 2005 in the anime Onegai My Melody, Kuromi took the punk, scene, and goth communities by storm and quickly became very successful. Due to this immense popularity, she has since become one of Sanrio's flagship characters and stars in various shows. True to her rivalry, she even sometimes surpasses My Melody herself in official Sanrio rankings and some media.</p>
<p>Originally, Kuromi had a hostile will towards My Melody, but current media since Hello Kitty and Friends Supercute Adventures (released in 2020) has herself reformed into a protagonist and now have a generally friendly demeanor with her rival as well as Hello Kitty and her friends.</p>
<p>On October 26th of 2021, a campaign by Sanrio called the "KUROMIfy the World Project" was officially formed. It is a plan to fill the world with everything Kuromi and her “Kuromies”, which is the title bestowed upon her fans. With the campaign came the official Kuromi YouTube, Instagram and Twitter accounts, an ad campaign truck in Japan, and Kuromi‘s own original debut song, <a>Greedy Greedy</a>. The song has both a Japanese as well as an English version, and a dance challenge to both versions was created where fans would be able to submit their own videos of themselves doing a set dance routine for a chance to be featured in a music video for the song.</p>
<a>KUROMI「Greedy Greedy English ver.」MV - Full song</a>Element types:
Block element
Inline element
Replaced element
CSS Insights
The behavior of <img> as an inline element shows that it sits on the same line with other content and at the same time having a special second characteristic as a replaced element which means it respects width, height, and horizontal margin and padding similar to block elements when it is in fact not.
Inline elements' vertical margin and padding have no effect on the content flow. These values of an img element derive from intrinsic dimensions of the image itself and CSS allows you to set them for visual control of the layout. The vertical margins do not collapse into one with its neighboring elements like the way block elements do.
Inline elements only respect horizontal margins and padding, not vertical ones. The value of vertical padding can be seen, however, it doesn't affect the layout in the same way as block elements, like pushing other elements down the flow. It will just runs over its content's line-height and overlapping with other content. While, vertical margins of inline elements are simply non-existent.
Summary
Kuromi's story is a great example of how block and inline elements behave in HTML. Block elements, like <h1>, <p>, and <div>, create a new block of content and take up the full width available, while inline elements, like <span> and <a>, only take up as much width as necessary and can sit alongside other content on the same line. The <img> and <iframe> elements are inline elements with second characteristic as replaced elements, which means they behave like inline elements but can also have their own dimensions, padding, and margins. However, their vertical margin values do not collapse with neighboring elements, a behavior only true to block elements.