网站测试时margin代码显示为页面文本，该如何修复？

问题根源 #

你在<div id="textbox">标签内部直接写入了margin-left:100px;，这段内容没有被包裹在CSS样式规则中，浏览器会将其识别为普通文本并渲染到页面上。

解决方法 #

方法1：使用行内样式

把样式直接写在div的style属性里，替换掉原来的纯文本内容：

<div id="textbox" style="margin-left:100px;">
  <img src="https://starchips.neocities.org/text%20box.png" width="1200" height="1000" > 
</div>

方法2：使用内部样式表（推荐）

将样式统一放在<head>的<style>标签中，更便于后续维护：

<head>
  <meta charset="UTF-8">
  <title>Testing stuff</title>
  <style>
    body {
      background-image: url("starbackground.gif");
    }
    #textbox {
      margin-left: 100px;
    }
  </style>
</head>

同时修改对应的div，移除内部的纯文本样式：

<div id="textbox">
  <img src="https://starchips.neocities.org/text%20box.png" width="1200" height="1000" > 
</div>

额外代码规范修正 #

1. <meta>和<title>标签必须放在<head>标签内，不能嵌套在<body>的div中，否则会导致浏览器解析异常。
2. 不要用<p>标签嵌套<h1>、<h2>这类标题标签（标题本身是块级元素，嵌套会破坏HTML结构规范），直接使用标题标签即可：

   <!-- 错误写法 -->
   <p><h1 style="color:Tomato;">testing stuff rn</h1></p>
   
   <!-- 正确写法 -->
   <h1 style="color:Tomato;">testing stuff rn</h1>
   

内容的提问来源于stack exchange，提问作者Olivia McGregor