I've recently developed a custom HTML tag called <bubble></bubble> which allows for unique styling using the custom type attribute.
Code snippet:
bubble[type=normal] {
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
}<bubble type="normal">Hello!</bubble>However, I encountered an issue with positioning the element when it is nested within div tags. The specified width: 50px; property seems to be ignored unless I use Position: Absolute;, but this approach introduces another problem explained below. Additionally, the element partially overlaps surrounding text even after applying margins on Top and Bottom.
Adjusted code with Absolute Positioning:
bubble[type=absoluteposition] {
position: absolute;
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
margin-top: 10px;
margin-bottom: 10px;
}<bubble type="absoluteposition">Hello!</bubble>The use of position: absolute; behaves similar to float: left; which is not desired even after setting margins on top and bottom. This particular issue also arises when using div tags.
Here's a demonstration on JSFiddle.net
If you have a solution, believe there is an error in my code, know an alternative way to resolve this issue, or require additional details on my inquiry, please don't hesitate to respond.