Solution 1 :

Ok let us start now

First of all using

<div class="boxed">
this is the text.

alone won’t do anything.

Use this code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
      /* The . with the boxed represents that it is a class */
      .boxed {
        background: lightgrey;
        color: black;
        border: 3px solid black;
        margin: 0px auto;
        width: 456px;
        padding: 10px;
        border-radius: 10px;
    <div class="boxed">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem quos esse
      at. Eaque porro vel soluta vero labore. Eius possimus ipsum deleniti
      perferendis quas perspiciatis reprehenderit adipisci fuga rerum velit.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed minus
      voluptatem consequatur fugiat excepturi reiciendis nulla! Modi dignissimos
      molestiae perspiciatis commodi! Autem, deleniti neque aperiam excepturi
      sunt corrupti ipsam voluptatum!

I hope it helps.

Problem :

example look

I’m writing with Markdown, and I want to put some text into a box. Since Markdown supports most of HTML(e.g I use <mark>keywords</mark> to highlight keywords), I try the following first but nothing happens.

<div class="boxed">
this is the text.

I know there’re other ways to highlight text in Markdown, but is there an easy way to actually create a box around text?


Comment posted by Dai

What do you mean by “box”, exactly? Do you mean a block-level box, or an inline outline?

Comment posted by Paw in Data

@Dai Hi! I just added a picture of what’s in my mind.

Comment posted by Chris

…why would

Comment posted by Paw in Data

Oh thank you! It works! I see there’s no easy solution now ^_^

Comment posted by LIL LOFIE

@PawinData that stuff you see in the style tags is called CSS I have got a suggestion for you to learn HTML, CSS, and Javascript and then practice it I think you’ll be a pro-front-end developer in the future.


Leave a Reply

Your email address will not be published. Required fields are marked *