CSS Inset Property
What are competencies?
EXP:
40
CSS Inset Property
Apply distance/margin between a parent & child element given that child element is placed absolutely in relation to its parent.
Use position & inset properties along with other properties to style & place the div(parent) & p(child) tag as per the instructions. Refer to the screenshots provided & try to mirror them.
Task for students
- Must to have
- apply the position property of relative to the div with a class of "container"
- target the p tag inside the div with class of "container" and apply a solid black border of 2px to it using border shorthand only
- set the position property of absolute to this p tag
- apply padding of 16px to this p tag
- use the inset property to apply an overall margin of 10px to this p tag
- div with class container element should have a background of 'brown' & paragraph element should have a background of 'beige'.
- div the paragraph element inside the div with class 'container' should have a color of 'brown'
- set the overflow property of this p tag to auto so that it can scroll if there is more text
UI reference
- Use the given provided code and try to mirror the UI.
- Initial
- Final
Evaluation
- After submission, your solution will be evaluated automatically based on the tasks defined above.
- Upon successful completion of all the tasks/requirements, you will get a full score, and there will not be any partial scoring.
- You can work on your failed test cases & resubmit your solution.
- Your problem will get evaluated instantly.
Do’s & don’t
- Use the given code structure in editor and do not make any changes.
- Do not modify existing classes or tags.
- Focus on correct HTML structure and class names.
Query & feedback
- In case of any query/feedback on this project, please fill this form & we will soon get in touch with you to resolve.
Best of luck, developers!