ADD BOX AROUND TEXT IN HTML CSS

[{"selector":"#anim-2005b39e-cea6-43c8-8d6d-faa48ec9a80e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb0ec986-08e4-4f7c-92f6-8683d00d676f","keyframes":{"transform":["translate3d(0px, -1033.82755%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f6ecf29d-48ef-4d26-a56c-acec7f21f2e9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-602f00af-6f5d-4824-b560-1c03d9a67812","keyframes":{"transform":["translate3d(0px, 137.74339%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0bd2b4a7-665a-4b49-8be1-fe65627f19ee","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14d817f2-3827-4398-9264-c0eaf366d034","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS (quick & simple example)

JUST ADD PADDING BORDER

[{"selector":"#anim-750df85f-f150-42e3-a16b-3952e333b72c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cbb87999-3305-4f82-af7b-927b4a52952d","keyframes":{"transform":["translate3d(-114.95328%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <div style="background: ghostwhite; font-size: 20px; padding: 10px; border: 1px solid lightgray; margin: 10px;"> TEXT </div>

THE BOX MODEL

[{"selector":"#anim-40de3194-a35a-4521-ab84-94fc01162411","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bc42427f-fd6d-4867-bf62-f50739047210","keyframes":{"transform":["translate3d(118.18181%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] CONTENT PADDING BORDER MARGIN Nearly all HTML elements are rendered according to the CSS box model. Go ahead - Set different sizes for each layer and test it for yourself.

VISIT & FOLLOW

[{"selector":"#anim-0b9a31e5-a109-4681-8998-92e07eccf926","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c0a7b36d-17c3-4893-8ac8-43d58d26ffc3","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7973f182-cfcc-43ae-9a2e-920e524e112c","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6a63a677-d993-419d-b3da-433a50d45f25","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d58dfb54-b391-42d4-baba-bc59cb119549","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b6e3aee0-67a2-43f8-8ef2-d6232f0d3aee","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-02d3eb69-852a-4ea7-9cdc-0d4c6706cf5a","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-402d48f3-2b5e-45ca-8d4c-28b27141ceb1","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4b218fef-a397-4e74-b23f-44cc4bb6400e","keyframes":{"transform":["translate3d(-170.2941%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-79782723-1433-4dd2-8cb8-c42b813b4797 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

ADD BOX AROUND TEXT IN HTML CSS

JUST ADD PADDING BORDER

01

THE BOX MODEL

02

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL