Skip to main content
Known Participant
October 31, 2022
Question

remove padding from div

  • October 31, 2022
  • 1 reply
  • 1562 views

Hi

I have code (Attached)

for the top object, i'd like to change the padding to 0

 

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--latest minified Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100" >
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top" >
<table width="400" border="0" cellpadding="0" cellspacing="0" class="card-footer">
<tbody>
<tr>
<td width="97"><span class="nav-item dropdown text-light"><img src="Screen Shot 2022-10-29 at 23.43.19.png" width="68" height="64" alt=""/></span></td>
<td width="303"><div class="container-fluid">
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><img src="Screen Shot 2022-10-29 at 23.43.19.png" width="68" height="64" alt=""/></a>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" href="#link1">Link</a> </li>
<li> <a class="dropdown-item" href="#"> <img src="Screen Shot 2022-10-29 at 23.43.19.png" width="97" height="64"></a> </li>
<li> <a class="dropdown-item" href="#">A third link</a> </li>
</ul>
</li>
</ul>
</div>
</div></td>
</tr>
<tr>
<td height="59" bgcolor="#000000">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
</tr>
</tbody>
</table>
</nav>
<table width="400" height="362" border="0" cellpadding="0" cellspacing="0" class="dropdown-menu-dark">
<tbody>
<tr>
<td bgcolor="#000000">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

    This topic has been closed for replies.

    1 reply

    Jon Fritz
    Community Expert
    Community Expert
    October 31, 2022

    Currently, youy have no <div> tag to remove the padding from. You appear to be using a table for layout, that's really not the way to do websites anymore. Tables are pretty unresponsive to the many, many screen sizes on the internet these days. That being said...

    The best way to add new css to a page, especially one that uses Bootstrap, would be to create a second .css file. You then link to that new css file right after the bootstrap .css in the <head> of the page.

    All of your custom css should go in that second file, leaving the bootstrap file untouched. 

    Then you just add one of the following...

    div {padding:0;} (affects all div tags)
    .nopadding {padding:0;} (affects only elements with class="nopadding" in them)
    #nopadding {padding:0;} (affects only the element with id="nopadding" in it)

    aviel222Author
    Known Participant
    October 31, 2022
    Look, I don't understand that much, I would be very grateful if you could help me change the code,
    I only know how to use tables.
    Jon Fritz
    Community Expert
    Community Expert
    October 31, 2022

    Dreamweaver really assumes that you understand the basics of html and css, and to a lesser extent javascript, to work with the program. Without those under your belt, even the most basic items are going to be a struggle to get done.

    Take the time to understand those basics. Burn a day or two going through the tutorials here:

    HTML: https://www.w3schools.com/html/ 

    CSS: https://www.w3schools.com/css/ 

     

    Once you understand the basics, the answer I gave will make a lot more sense (it's really a "designers choice, cut and paste" type of thing), and you'll be able to take care of other simple issues without pausing your work.