How to create a text inside a box using HTML and CSS?-CodePudding

I'm trying to create a text(S) inside a rectangular box and the other one(Fox.) outside the box, Just like this:

I tried to create it but something is wrong Here's the code:

div {
  width: 18px;
  height: 72px;
  padding: 10px;
  border: 5px solid black;
  margin: 0;
}

   <html>
<head>

</head>
<body>
<div><h1>S</h1></div><p><h1>Fox.</h1>
</body>
</html>

CodePudding user response：

Fixed it for you.
The problem was that you used 2 h1 next to each other.
Each h1 will automatically go to a new line.
I fixed it by using only one h1 and added a <block> where you can add the styles.

block {
  width: 18px;
  height: 72px;
  padding: 10px;
  border: 5px solid black;
  margin: 0;
}

<html>
  <head>

  </head>
  <body>
    <h1>
      <block>S</block> Fox.
    </h1>
  </body>
</html>

CodePudding user response：

the basic idea is not bad! Now I will show you a solution to your problem and we will analyze all the components together.

Let's think about the structure of DIV. First you will need two divs with a reference class or reference ID and you want them to be arranged side by side. To put them side by side you could create an additional parent div, of flexible type (called father).

We also need 2 texts. In this example I will use simple spans.

We also create a style.css file where we will store the style of our containers So we can write this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Link your stylesheet -->
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
    <div id="father">
        <div id="sonOne"><span>S</span></div>
        <div id="sonTwo"><span >FOX.</span></div>
    </div>
</head>
<body>

</body>
</html>

For the style instead, we need to assign the parent a flexible orientation and line type. For the style, on the other hand, we need to assign a flexible, row-type orientation to the parent. To the first div should be put the border and to the second div, the text inside should be bold

Create style.css and try all togheter. Run this!!!

#sonTwo,#sonOne {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#sonTwo,#sonOne span {
    font-size: 50px;
}

#father {
    display: flex;
    flex-direction: row;
}

#sonOne {
    border: 2px solid black;
    border-radius: 5px;
    padding: 5px;
}

#sonTwo {
    padding: 5px;
}

.fox {
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Link your stylesheet -->
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
    <div id="father">
        <div id="sonOne"><span>S</span></div>
        <div id="sonTwo"><span >FOX.</span></div>
    </div>
</head>
<body>

</body>
</html>

For the S on the other hand, you could assign a font from Google Fonts that we have the borders the way you like them

CodePudding user response：

<html>
<head>
<style>
 block {
 width: 20px;
 height: 62px;
 padding: 20px;
 border: 1vh solid black;
 margin: 10;
 }
 </style>
 </head>
 <body>
 <h1>
   <block>S</block>FOX
 </h1>
 </body>
</html>