space required on the upper side of the cell

I have formatted a text (including title and paragraph) in a cell using CSS styles to achieve the desired appearance. The only thing left is to create some space between the top of the Title and the content below it. I attempted to use the margin parameter with the L1 tag I created, but unfortunately, it did not work as expected. What would be the solution to this issue?

CSS 

<style>
p {
  margin-top: 0px;
  margin-bottom: 0px;
}
L1{
    font-size:12px}
</style>

Here is the code for the cell: 

<td width="373" valign="top"><p><strong><l1>ARTICLE #11</l1></strong><p>          
<br>          
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis elit in lobortis interdum. Morbi gravida scelerisque ultrices. Suspendisse eget felis efficitur, porttitor tellus eget, euismod metus. Nullam id pellentesque quam, quis ultrices ipsum. Aenean orci purus, ultrices vel</td>
htmlcsstagsmarginparagraph

Answer №1

Replace the l1 tag with a different tag, such as span, and apply CSS display block to make it function properly.

Answer №2

The issue lies in the fact that <l1> is not a valid HTML tag.

To resolve this, simply replace it with a <h1> tag, as demonstrated in this example.

<h1>NEW HEADING</h1>

Don't forget to adjust the CSS accordingly:

h1{
    font-size:16px;
    margin-top:40px;
}

Answer №3

If you wish to customize the appearance of the h1 element, you can adjust its display property to inline-block:

p {
    margin-top: 0px;
    margin-bottom: 0px;
}
h1 {
    font-size:12px;
    display: inline-block;/*update display to inline block*/
    padding-top: 10px;/*Include padding top*/
}

table{
    border: solid 1px;
}
<table>
    <tr>
        <td width="373" valign="top">
            <p><strong><h1>ARTICLE #11</l1></strong>

            </p>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis elit in lobortis interdum. Morbi gravida scelerisque ultrices. Suspendisse eget felis efficitur, porttitor tellus eget, euismod metus. Nullam id pellentesque quam, quis ultrices ipsum. Aenean orci purus, ultrices vel</p>
        </td>
    </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing a form after submission using JavaScript

After submitting the form, I am attempting to hide it and display a loading GIF. I've experimented with various methods, including changing ClassName to Id, but haven't had success. This is for a school project, and I've spent a significant ...

javascriptphphtmljquerycss

Using jQuery, you can easily update the value of the nth-child(n) for a cloned element

Looking to duplicate an HTML element and assign new values to its child elements? Here's my current HTML structure: <div id="avator" class="avator" style="display:none"> <label><a href="/cdn-cgi/l/email-protection" class="__cf_email ...

htmljquerycss

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger

Step-by-step guide on permanently updating the text of select options with JavaScript

Here is the code for a select option with different values: <select id="test" onchange="changeContent()"> <option>1</option> <option>2</option> <option>3</option> </select> The javascript function that chan ...

javascripthtml

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: https://i.sstatic.net/6Mrtf.png I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngO ...

javascripthtmlcssangulartypescript

Searching for a way to sort out role-specific usernames in a dropdown menu using AngularJS?

Is there a way to effectively filter usernames based on specific roles in a dropdown using AngularJS? Hello, I am trying to filter the usernames with the 'KP' role in the dropdown list. Please refer to My plunker for more information. Init ...

htmlangularjsmeanjs

Unable to transform dynamically loaded text area into CKEditor

Executing the get_content function upon a link click. function get_content(n) { var hr=new XMLHttpRequest(); var url="./updatecontent.php"; var vars="id="+n; hr.open("POST",url,true); hr.setRequestHeader("Content-type","application/x-w ...

javascripthtmlajaxckeditor

Use custom styles or CSS for the file input element: <input type="file">

Can CSS be used to achieve consistent styling for <input type="file"> in all browsers? ...

htmlcssfile-io

Setting the width of a div element dynamically according to its height

Here is a snippet of my HTML code: <div class="persoonal"> <div class="left"></div> <div class="rigth"></div> </div> This is the CSS code I have written: .profile { width: 100%;} .left { width: 50%; float: le ...

javascripthtmlcss

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...

javascriptjquerycss

Begin an HTML document by loading it with xml.Load

I am looking to access an HTML document stored as a string retrieved from a StreamReader on the web and then convert it into an XMLDocument. Currently, I am using the following code: XmlDocument doc = new XmlDocument doc.Load(string containing the retrie ...

c#htmlxmldocument

Guide to creating a contenteditable div that automatically generates smart quotes instead of traditional dumb quotes

I've observed that when I write in Google Docs, I get smart quotes. However, when I create contenteditable divs on my own, I only see dumb quotes. Is there a way to make my contenteditable divs display smart quotes instead of dumb quotes? ...

javascripthtmlcss

Ways to trigger a click event on a dynamically added class utilizing $(this);

I am attempting to retrieve the text when clicking on dynamically appended HTML elements. After some research, I came across the following code snippet: $(document).on('click', '.myClass', function (). However, it seems to work only f ...

jqueryhtml

Need to convert an HTML table to JSON format? Visit convertjson.com/html-table-to-json.htm to easily convert your HTML table

Can anyone help me with converting HTML table data to JSON? I found a website that does something similar: I have tried some solutions but encountered issues at the end. I just need a JSON output to convert it into an array and continue with my project. ...

phphtmljsonruby

Trouble with CSS matching pattern - not functioning as expected

I am facing a requirement to customize the colors of ribbon styles instead of using the default ones. After researching pattern matching in CSS, I attempted the following code, but it did not work: This is my original CSS: .ms-cui-cg-**tl** .ms-cui-ct-f ...

css

Using Javascript to refresh an image and update a class within a DIV when another DIV is clicked

I have a code that is quite lengthy to share here, so I've created a demo on JSFiddle: http://jsfiddle.net/Emily92/5b72k225/ This particular code takes a random image and divides it into multiple sections based on the class applied to the div contain ...

javascriptjqueryhtmlcssimage

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

htmlcsstwitter-bootstrap-4

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

I am currently using jQuery to retrieve the height of one div and apply that value as a CSS property to another. Let's take a look at a sample layout: <div class="row"> <div class="column image"> <img src="image.jpg" /> < ...

javascriptjqueryhtmlcssfunction

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...

cssangulartypescriptsass

Why am I not receiving any results from the communication between JavaScript and PHP using an HTTP GET request?

Currently, I have a small JavaScript program running within an HTML5 canvas and included a HTTP GET request function in my JavaScript code. The function itself is functioning properly as I tested it with multiple examples from the internet, all of which wo ...

phpjavascripthtmlhttpcommunication