Issue
The following code states my problem.
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
}
p {
width: 300px;
}
<p>
I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>
As we can see that the top half of the span element cover the text and the bottom half does not, specifically, the word 'paragraph'
is obscured but 'span is an'
is not
Solution
That's because of the line by line execution of the file. set position:relative
for span
it will be on top of other elements.
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: red;
border: 2px solid blue;
position: relative;
}
p{
width:300px;
}
<p>
I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>
Answered By - Viira
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.