Hello, i need a simple explanation. Where is my problem?
html code:
<label id="comment-label" for="comment">Comment section. Make sure to leave only positive comments:</label></br>
<input id="comment" type="text" placeholder="Just remember, no bad comments...">
css code:
#comment-label {
position: relative;
top: 3px;
margin: 10px 0 10px 12px;
}
Why text is not aligned? I mean why paragraph is not on the same level. Im using same code for other text and everything is fine.
Link to code in codepen: https://codepen.io/SimonasZ/pen/OJVqPyZ
Because you have a left margin of 12px set on it
#comment-label {
position: relative;
top: 3px;
margin: 10px 0 10px 12px;
}
That text is in a label tag which has a default display of inline, so the left margin only applies to the first line of the text. If you want all of the lines of text to have a left margin of 12px then you need to set the display on that element to block or inline-block. If you don’t want any left margin then change it to 0.
OK, i will try that. But whats the difference here?
same code:
#name-label, #email-label, #number-label, #dropdown-label, #text1, #text2 {
position: relative;
top: 3px;
margin: 10px 0 10px 12px;
}
And the result is different:
Ok, i think now i understand.
One is ina label tag, the other is in a p tag. Thanks for help!
