Estoy diseñando una extensión de Google Chrome. Está diseñado para insertar una imagen en el texto. Actualmente lo hace, pero la imagen adjunta en la parte inferior muestra mi problema. La imagen se muestra sobre el texto, y me preguntaba si había alguna manera de hacer que la imagen tuviera su propio espacio separado, como si estuviera usando un margen, por lo que la serpiente está a la izquierda del logotipo y todos los enlaces, y todo. el resto de la página se desplaza ligeramente hacia la derecha. Sin embargo, ni marginLeft ni marginRight funcionan. Este es mi código:

ventana emergente.js:

 function imageappend() { const img = document.createElement("img"); img.src = chrome.runtime.getURL("imageedit_1_3932659157.png"); img.style.position = "fixed"; img.style.top = "0"; img.style.left = "0"; img.style.padding = "0"; img.style.marginRight = "7%"; img.style.marginLeft = "0"; img.style.marginBottom = "0"; img.style.marginTop = "0"; img.style.width = "5%"; document.body.appendChild(img); } let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: imageappend }); })();