CSS margin shorthand 속성은 요소의 여백 영역을 정의하는 데 사용됩니다. 시계 방향(예:margin-top, margin-right, margin-bottom, margin-left)으로 값을 설정합니다.
구문
CSS margin 속성의 구문은 다음과 같습니다 -
Selector { margin: /*value*/ }
다음 예는 CSS 여백 약식 속성을 보여줍니다 -
예시
<!DOCTYPE html> <html> <head> <style> div { margin: 7% auto -3% 25%; width: 40px; height: 40px; padding: 0.9rem; box-shadow: inset 0 0 50px turquoise; border: thin solid; } div > div { border-top-right-radius: 100px; border-bottom-right-radius: 500px; border-top-left-radius: 30px; box-shadow: inset 0 0 6px navy; } div > div > div { padding: 0.3em; margin: 2px -40px; box-shadow: inset 0 0 16px orange; border-radius: 50%; } #one { padding: 50px; border-radius: 10px; } </style> </head> <body> <div id="one"> <div> <div></div> </div> </div> </body> </html>
출력
예시
<!DOCTYPE html> <html> <head> <style> article { margin: 2em 1em; background-color: bisque; } span { margin: -23% 83%; border-left: dashed; background-image: linear-gradient(to right, lightgreen, forestgreen); font-size: 1.4em; font-style: italic; } </style> </head> <body> <h2>What is Spring Framework?</h2> <article> Spring framework is an open source Java platform. It was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.<span> Spring is lightweight when it comes to size and transparency. The basic version of Spring framework is around 2MB.</span> </article> </body> </html>
출력