What is the most common way to create some space below a div table?

Is there a CSS attribute that can create space after the table without using <br>?

.bold {
    font-weight: bold;
}

.body-settings {
    font-family: opensans, sans-serif;
    font-size: 15px;
    line-height: 22px;
    margin: 0;
    background-color: black;
}

.site-wrapper {
    background-color: lightyellow;
    max-width: 50%;
    margin: 0 auto;
    padding: 30px;
    position: relative;
}

.rTable {
    display: table;
    width: 100%;
    margin-bottom: 1em;
}

.rTableRow {
    display: table-row;
}

.rTableCell {
    display: table-cell;
}

.rTableCellBold {
    font-weight: bold;
}
<body class="body-settings">
  <div class="site-wrapper">
    <div class="rTable">
        <div class="rTableRow">
            <div class="rTableCellBold">Subject Name:</div>
            <div class="rTableCell"> John Doe</div>
        </div>
        <div class="rTableRow">
            <div class="rTableCellBold">Occupation:</div>
            <div class="rTableCell"> Professional Impersonator</div>
        </div>
    </div>
    <div class="bold">
        Executive Summary
    </div>
  </div>
<body>

htmlcss

Answer №1

To apply some space at the bottom of the rTable, you can simply utilize the margin-bottom property.

.content-body {
    font-family: roboto, sans-serif;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    background-color: #f3f3f3;
}

.main-wrapper {
    background-color: lightblue;
    max-width: 60%;
    margin: 0 auto;
    padding: 40px;
    position: relative;
}

.rTable {
    display: table;
    width: 100%;
    margin-bottom: 25px;
}

.rTableRow {
    display: table-row;
}

.rTableCell {
    display: table-cell;
}
<body class="content-body">
  <div class="main-wrapper">
    <div class="rTable">
        <div class="rTableRow">
            <div class="rTableCellBold">Name:</div>
            <div class="rTableCell"> Jane Smith</div>
        </div>
        <div class="rTableRow">
            <div class="rTableCellBold">Occupation:</div>
            <div class="rTableCell"> Software Engineer</div>
        </div>
    </div>
    <div class="bold">
        Summary of Experience
    </div>
  </div>
</body>

Answer №2

The issue I encountered was due to my omission of rTableCellBold from the list with display: table-cell;:

.rTableCell, rTableCellBold {
    display: table-cell;
}

Once I made this adjustment, everything worked perfectly:

.rTable {
    display: table;
    width: 100%;
    margin-bottom: 1em;
}

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

Fetching data from local JSON file is being initiated twice

I need some help understanding why my code is downloading two copies of a locally generated JSON file. Here is the code snippet in question: function downloadJson(data, name) { let dataStr = 'data:text/json;charset=utf-8,' + encodeURICompo ...

javascripthtmljson

Guide on incorporating the <a> element within a Bootstrap button

Check out this Demo on JS Fiddle: I am having trouble adding the href attribute to these buttons. I found that it works when structured like this : <a href="/"> <button type="button" class="btn btn-default btn-custom"> <span ...

htmlcsstwitter-bootstrapbutton

Having trouble displaying the image in my administrative tool

I am currently developing an admin application that will showcase uploaded product images stored in a database. The images are saved as object IDs in MongoDB. However, the image container in the admin app shows the count of images stored in the database bu ...

javascripthtmlnode.jsreactjs

Decrease the font size of text using intervals in CSS

I'm facing a challenge where I need to decrease the font size by 10% every 2 seconds. <div class="shrink"> text </div> .shrink{ transition: 2s linear all; font-size : 20px; } Is there a way to achieve this using only CSS? ...

css

Suggestions for correcting radio group alignment issues on mobile devices, aiming to align them at the top

When it comes to my radio button group, everything looks great on larger devices. However, on mobile view, the radio button ends up in the middle of the text. I would prefer it to be aligned at the top of the text. <Check out this image link for refere ...

htmlcssbootstrap-4

'addEventListener' and 'onclick' functions are restricted to the 'window' element and cannot be used on any other element, such as a button

I am currently working on developing a Snakes and Ladders board game using JavaScript. I have encountered an issue with adding 'onclick' or 'addEventListener' events to the buttons in the game. When I try to attach these events to the b ...

javascripthtmlonclickaddeventlistener

Troubleshooting a problem with the navigation links on a single-page website with a

https://i.sstatic.net/5xcv9.png My website alampk.com features a single page layout with a fixed navbar at the top. However, when I click on links like exp, portfolio, etc., the section moves to the top but a portion of 50px gets covered by the navbar. I ...

jqueryhtmlcsstwitter-bootstrap-3

Issue with the div elements not aligning next to each other

I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected. I have tried using flex, bootstrap ...

htmlcss

PHP updating data in a MySQL database

I've been using easyPHP and encountering issues with updating records in my database. Whenever I try to update, the HTML form displays <?php echo $btitle; ?> and <?php echo $bauthor; ?> instead of updating the data. However, it does print ...

phphtmlmysqldatabase

How can you transform a multi-dimensional array into HTML input fields?

I have a task where I need to convert a multidimensional array into HTML form fields. Here is an example of what I'm trying to achieve: <input type="hidden" name="c_record[contact][0][name]" value="First Last"> <input type="hidden" name="c_r ...

phphtmlarrays

Tool to track character limits in multiple text fields

I'm facing a challenge with a form that includes 3 text areas, a copy button, and a reset button. My goal is to concatenate all the characters in the text areas to get a sum which will be displayed next to the copy/reset button. The character limit is ...

javascripthtmlformscounter

Save the content of textarea within a .txt document while preserving the line breaks

I have a piece of code that successfully saves the value of a textarea into a local text file. However, I am facing an issue where I don't want to lose line breaks. Here is the code snippet and fiddle: HTML <textarea id="textbox">Type somethin ...

javascripthtmltextarealine-breaks

Separate the webpage into distinct sections for effective web design

I'm attempting to create a collapsible sidebar for mobile phones. However, after the first three images, the subsequent images on the next line appear below the sidebar instead of beside it. The top part looks fine, but as I scroll down to view the o ...

htmlcsstwitter-bootstrapbootstrap-5

Ensure that the display is set to block to stack the input elements on top of each other

I am attempting to grasp the functionality of CSS display property and experimented with this basic HTML code: <div> <form className="container" action=""> <input name="fName" placeholder="First Name" type="text" value={props.fNam ...

htmlcss

The processing indicator fails to function properly when trying to refresh a jQuery datatable

I am currently customizing the loading indicator for the datatable using a spinner called startLoadGlobal(SPINNER_DATA_TABLE_FINANCEIRO_CARREGAR_REGISTROS) in jQuery. It works correctly when I initially load the datatable, however, when I reload it, the sp ...

javascripthtmljqueryjquery-uidatatables

The CSS files are not downloading for me

I am trying to incorporate some .css files into my Django project, but for some reason they are not loading. The css files can be found at "/myproject/media/css". Here is how I have set it up: import os.path PROJECT_DIR = os.path.dirname(__file__) ME ...

cssdjango

What is the best way to add an element directly following another within the document's head section?

In my HTML project, I am using JavaScript to insert style elements into the head section. I have implemented a function that should inject styles into a specific id within the head tags. This is a snippet of my current HTML code: function insertAtElemen ...

javascripthtml

What are the best methods for ensuring a website maintains consistent visibility across all different screen sizes?

Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques. For instance: When viewing the website on a 360 ...

javascripthtmlcssfrontendweb-deployment

The submit button is getting disrupted by the background image being set

Implement the following CSS code to set a background image on a single-page app (Angular). .page::before { content: ''; position: absolute; background-size: cover; width: 100%; height: 100%; background-image: url("../../assets/weird. ...

cssangular

Fixed bar on top, revealed only when the scroll attempts to conceal it

I have placed a menu on the top section of my website, but not at the very top. I would like it to stick to the top of the page when the user scrolls down and disappears from view. However, if the title is still visible, I want the menu to remain below it ...

javascriptcss