• Door naar de hoofd inhoud
  • Spring naar de eerste sidebar
  • Home
  • Websiteontwikkeling
  • ZZP’en
  • Fysiek fit
  • Over mij

W.S. Spoelstra

Learning through blogging

Verschil tussen inline en inline-block!

2 juli 2014 by Willem-Siebe Spoelstra 1 Reactie

Wel eens afgevraagd wat het verschil is tussen display:inline, display:block en display:inline-block?

In woorden, inline vs block vs inline-block

Gevonden via Google: CSS display: inline vs inline-block.

Inline elements:

  • respect left & right margins and padding, but not top & bottom;
  • cannot have a width and height set;
  • allow other elements to sit to their left and right.

Block elements:

  • respect all of those;
  • force a line break after the block element.

Inline-block elements:

  • allow other elements to sit to their left and right
  • respect top & bottom margins and padding
  • respect height and width

Visueel, inline vs block vs inline-block

Gevonden via Google: What is the difference between display: inline and display: inline-block?.

Imagine a element inside a

. If you give the element a height of 100px and a red border for example, it will look like this with…

Inline elements:

display:inline
display:inline

Block elements:

display:block
display:block

Inline-block elements:

display:inline-block
display:inline-block

Gerelateerd

Dit delen:

  • Tweet
  • E-mail

Gerelateerd

Categorie: Websiteontwikkeling

Lees Interacties

Reacties

  1. nick van der mee zegt

    19 januari 2017 om 11:30

    Beste Willem-Siebe Spoelstra,

    Allereerst bedankt voor de artikelen/informatie op deze site, staan een hoop nuttige en interessante dingen m.b.t. WordPress en alles eromheen!
    Ik ben zelf een site aan het bouwen en heb imiddels 99% van de dingen die ik wilde voor elkaar gekregen m.b.h. plug-in’s, de php en de style.CSS.
    Echter ik krijg ik 1 ding niet voor elkaar: het naast elkaar zetten van 2 widgets (een zoekbalk en een prijsfilter) in de under header.
    Ik heb van alles geprobeerd qua margin, padding etc maar de zoekbalk wil niet naast de filter (ik kan hem er wel enigszins naast krijgen maar niet op dezelfde hoogte).
    En ook het naar rechts verplaatsen gaat maar tot ongeveer 2/3 van de under header oftewel er blijft een groot deel gewoon leeg, wanneer ik hem verder wil verplaatsen wordt hij simpelweg kleiner i.p.v. dat hij naar rechts verplaatst
    Ik kan nergens een oplossing vinden en hoop dat jij er is naar wil kijken?
    Dit is de style.CSS:

    */

    div#feedbackTabOuter {
    z-index: 999;
    }
    .widget form {
    align:left;
    }
    .feedbacklink {
    padding-top: 5px;
    }
    .product-feedbacklink {
    margin-left: 15px;
    float: left;
    }

    ul.products li.product .button.product_type_simple {
    display: none;
    }
    .quantity {
    display: none;
    }
    .navbar-custom .nav li > a {
    font-size: 10px;
    }
    .xoo-qv-container {
    border-radius: 12px;
    }
    .xoo-qv-opac {
    opacity: 0.2;
    }
    .xoo-qv-button {
    width: 50%;
    }

    .add-to-cart-button-wrap {
    display: none;
    }
    .quick_view_product_simple_addtocart_container.quick_view_product_addtocart_button_container {
    display: none;
    }
    div#cboxOverlay {
    opacity: 0.2 !important;
    }

    #woocommerce_price_filter-8 {
    display: block;
    width: 50%;
    }
    #autocomplete-3 {
    display: block;
    width: 22%;
    }
    li:before {
    display: none;
    }

    .bg-dark {
    background-color: #3a3a3a !important;
    }
    body.custom-background {
    background-color: #3a3a3a !important;
    }
    .module-small.bg-dark.shop_isle_footer_sidebar {
    padding-top: 10px;
    Padding-bottom: 15px;
    }
    footer.footer.bg-dark {
    display: none;
    }
    .navbar-custom .nav > li > a:hover, .navbar-custom .nav .open > a, .navbar-custom .nav .open > a:hover {
    color: #018c6d;
    }
    .woof_products_top_panel li a {
    display: none;
    }
    .navbar-custom .nav li > a {
    color: #777;
    }
    .navbar-cart-inner {
    display: none;
    }
    .header-search {
    display: none;
    }
    .widget input[type=search], .widget input:not([type=submit]), .widget textarea {
    width: 22%;
    }
    .widget input[type=submit] {
    padding: 8px 25px;
    }

    @media screen and (max-width: 3000px) {
    li#woocommerce_price_filter-8 {
    padding-top: 85px;
    padding-left: 10%;
    padding-right: 15%;
    margin-left: 15px;
    margin-right: none;
    margin-bottom: 15px;
    background-color: #3a3a3a;
    }
    li#autocomplete-3 {
    padding-top: 150px;
    padding-left: 95%;
    padding-right: 5%;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    background-color: #3a3a3a;

    }

    }

    .widget {
    list-style: none;
    }
    h2.widgettitle {
    display: none;
    }
    section.woocommerce-page-title.page-header-module.module.bg-dark {
    display: none;
    }
    .page-header-module.module {
    padding: 0px 0 0px;
    }
    .navbar-custom {
    background-color: #ffffff;
    }
    .page .navbar-custom {
    background-color: #ffffff !important;
    }
    .onsale {
    min-width: 90px !important;
    min-height: 90px !important;
    border-radius: 50px !important;
    padding: 15px !important;
    background-color: #018c6d !important;
    }

    Alvast super bedankt!

    M.v.g,

    Nick

    Beantwoorden

Geef een reactie Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Primaire Sidebar

Waar wil je wat over weten?

Meest gelezen berichten laatste 48 uur

  • Breadcrumbs, over SEO, WordPress en de kruimelpad problematiek
  • Het verschil tussen b, strong, i & em plus tips voor WordPress en SEO
  • Sterren in Google: de complete uitleg!
  • WooCommerce email templates aanpassen
  • Licentie uitleg WordPress thema's Themeforest

Meest recente berichten

  • Zakelijke kosten, investeringen en afschrijvingen
  • Affiliate disclosure voorbeelden
  • Websiteontwikkeling links
  • Lijstje: recepten zonder pakjes & zakjes
  • Gewicht: doel versus realiteit

Recente reacties

  • ramona op Hoe je in Gmail autoresponder e-mails maakt
  • ramona op Hoe je in Gmail autoresponder e-mails maakt
  • Rob Stolk op Klassieke opzet (web)server, simpele uitleg!
  • Willem-Siebe Spoelstra op Klassieke opzet (web)server, simpele uitleg!
  • Henk op Klassieke opzet (web)server, simpele uitleg!

Categorieën

  • Fysiek fit (2)
  • Websiteontwikkeling (42)
  • ZZP'en (2)

Mis niks, volg mij via Facebook!

Mis niks, volg mij via Facebook!

Tags

Boekhouden (1) HTML (3) Webdesign (1) Webdevelopment (6) WooCommerce (2) WordPress (11) Zoekmachine optimalisatie (SEO) (4)

Mis niks meer…

Meld je aan op mijn e-mail lijst en je krijgt simpelweg een mailtje als ik weer wat gedeeld heb over webdevelopment, WordPress of SEO!

Aanmelden

Copyright © 2021

loading Annuleren
Bericht niet verstuurd - controleer je e-mailadres.
E-mail-controle mislukt, probeer het opnieuw
Helaas, je blog kan geen berichten per e-mail delen.